Как выровнять элементы flex контейнера по высоте?

Question

[minaev007]

Тут все хорошо - https://jsfiddle.net/yw1xazs0/1/
Но как только в один из блоков inner добавляется контент, высота элементов становится разной - https://jsfiddle.net/xdnd9d4c/
Как сделать так, чтоб они не менялись до тех пор, пока высота контента в одном из блоков не превысит допустимую?
Условие: нельзя менять min-height на height в контейнере, потому что на большинстве смартфонов в ландшафтном режиме не хватает высоты для размещения всего контента в блоках. Поэтому height: 150vh приведет к тому, что каждый элемент контейнера будет слишком маленькой высоты

Comments

[Игорь]

.cont {
height:1px; //<---
min-height: 150vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Нужно добавить высоту

[Игорь Плотников]

Либо я не понял что нужно, либо надо просто добавить минимальную высоту для иннеров, в которых будет контент:
*тык*

Answer 1

[Игорь Плотников]

нельзя менять min-height на height в контейнере, потому что на большинстве смартфонов в ландшафтном режиме не хватает высоты для размещения всего контента в блоках

Если у тебя есть решение, то сделай его, просто потом для мобилки сделай другие условия (@media), я не конкретно про этот случай, а в общем.

Comments

[minaev007]

Да. Пожалуй лучшее решение для меня сейчас - это использование media (max-height: Npx)

Answer 2

[Игорь]

.cont {
height:1px; //<---
min-height: 150vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Нужно добавить высоту

Comments

[minaev007]

но тогда если добавить в один из элементов контент, высота которого будет превышать его размер (к примеру блок высотой в 60vh), элемент не растянется до 60vh, а останется 50vh, а содержимое блока скроется

[Игорь]

minaev007, Тогда вам лучше отказать от flex в этом контейнере, а сделать все 3 дива min-height:50vh;
Тогда они будут тянуться в зависимости от контента.

[minaev007]

TAPAKAHATOP, так а проблема в том, что так в большинстве контейнеров, построенных на flex - в горизонтальном режиме на смартфонах мало высоты. должно же быть какое-то решение этой проблемы... она по идее достаточно распространенная