Flex box match element height

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

Hello @anon86258595 !

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

Hello to you @anon42932716 :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.
@anon42932716, You are very experienced and kind!

1 Like

Thank you @anon86258595 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!

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

@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…

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.