Flex box match element height

Code Feedback
1

Hi Coders!
I need feedback on this:

I’m trying to make the elements match the height of whatever row its on and nothing I do is working.
Depending on the screen size I want the active calories and challenges div to grow in height.
I’ve been trying to do this for ages already and nothing is doing.
Thank you so much!

1 Like
2

Hello @starstruck !

As you know, you are far more experienced with this.
But, I did a search on Bing Chat and came up with this option using flex.

.flexbox {
display: flex;
flex-wrap: wrap;
}

.column {
flex: 1;
}

.element {
height: 100%;
/* or */
align-items: stretch;
}

I do not know if you have tried it.

Keep up your amazing progress and happy coding!

1 Like
3

Hello to you @Gray.n.Grey :smile:!
Thank you for your kind words, they mean a lot.
I tried doing what you suggested and I can’t for the the life of me figure out why but nothing is changing.
Thank your for trying though.
@Gray.n.Grey, You are very experienced and kind!

1 Like
4

Thank you @starstruck for your kind words of support. They are valued by me.

I found something on a grid layout, too. But, that one changes according to the largest one in the row on the grid.

I wish I knew more to help. But, the real experienced people will be around to help you, I am sure. :slight_smile:

Keep up your amazing progress in both your learning and your support in the forum.

Happy coding!

5

hiya Starstruck, this seems to work. Not sure if it works in all the conditions you want though. Give it a try.

div:not(.dashboard) {
  flex-grow: 1;
  flex-shrink: 1;
  height: auto;
}
1 Like
6

@jim03 your such an angel!
It worked after adding the !important attribute and now it looks great.
Thank you so much, It was bothering me the whole day and now I can finally stop stressing.
I have no words, your Amazing :star_struck:!
Its my first project that isn’t so bad so I’m hoping it gets picked on codepen :laughing:.
Not that I know how those things work…