Изменение размера элементов на основе высоты контейнера, чистого CSS

Question

Я пытаюсь, чтобы первый раздел моей страницы был на 100% от окна пользователя, при этом 3 вертикальных элемента изменяются в зависимости от высоты экрана.

Для достижения этой цели я использую Flexbox, в частности эти стили:

CSS

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

.theitems { 
    flex-grow: 1; 
} 

Это делает работу, но по какой-то причине это только изменение размеров элементов правильно в Firefox. Safari растягивает изображение, а Chrome не изменяет размер. Я думал, что спецификации Flex, которые я дал (flex-grow: 1), изменят размер элементов таким образом, чтобы они все соответствовали контейнеру вертикально.

Firefox (Правильный)

Хром (Некорректный)

Сафари (Некорректный)

JSFiddle

Кто-нибудь есть какие-либо идеи, что происходит здесь?

Answer 1

Это выглядит, как вы смешиваете два правила, которые не работают хорошо вместе.

Вы предоставили контейнер justify-content: space-between.

Но вы также указали на каждый предмет гибкости flex-grow: 1.

Если каждый элемент настроен на потребление всего доступного пространства, justify-content: space-between ничего не делает (нет места для распространения).

Выберите один или другой.

Answer 2

Почему бы не использовать vh?

height: 100vh //This is 100% of the viewport 

Тогда вы можете дать элементы внутри 33.33vh