Hunter Turner Hunter Turner - 1 year ago 121
HTML Question

Resizing elements based on container height pure CSS

I am attempting to have the first section of my page be 100% of the user's window, while having 3 vertical items resize depending on the height of the screen.

To achieve this I am using flexbox, specifically these styles:


.vertical-content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;

.theitems {
flex-grow: 1;

This does work, but for some odd reason it only will resize the elements correctly in FireFox. Safari stretches the image and Chrome doesn't resize at all. I thought that the flex specifications I gave (
flex-grow: 1
) would resize the items so that they all fit within the container vertically.

FireFox (Correct)

enter image description here

Chrome (Incorrect)

enter image description here

Safari (Incorrect)

enter image description here


Does anybody have any idea what is happening here?

Answer Source

It looks like you're mixing two rules that don't work well together.

You've given the container justify-content: space-between.

But you've also given each flex item flex-grow: 1.

If each item is set to consume all available space, justify-content: space-between does nothing (there's no space to distribute).

Pick one or the other.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download