Как сделать чтобы элементы во флекс-контейнере всегда занимали одинаковую высоту?

Question

[lodbrock]

Добрый вечер. Есть главный флекс-контейнер с элементами, которые выравниваются по центру вдоль перпендикулярной оси. Второй флекс-элемент также является флекс-контейнером и содержит два элемента. Задача заключается в том, чтобы данные два элемента(красный блок и белый) были равны по высоте при увеличении кол-ва текста в красном блоке.

Comments

[origami1024]

сформулируй нормально задачу, там нету белого вообще блока

[lodbrock]

origami1024, извиняюсь, не сохранил. Если задать обоим высоту по 50%, то при добавлении текста в красный блок он будет выпадать за пределы. Мне же нужно чтобы блоки увеличивались по высоте. Такое возможно сделать средствами css?

[origami1024]

а что если контейнеру
align-items: stretch; вместо center

[lodbrock]

origami1024, в этом случае растянется зеленый блок на всю его высоту. Мне нужно именно как-то в зависимости от высоты красного блока, делать такую же высоту у белого.

[origami1024]

Можно не сложно на js.
Через css - табличной версткой, но тогда надо структуру делать другой, т. е. у тебя будет не две карточки (.one, .two) а строки таблицы. Между столбцами сделаешь пропуски пространства, чтоб выглядело как 2 отдельных блока

[lodbrock]

origami1024, спасибо за ответ. Я так понял, что с помощью флексов такое сделать просто нельзя?

[origami1024]

вот жаваскрипт ответ, так ты хотел?
https://jsfiddle.net/4ox5q7re/

[lodbrock]

origami1024, нет, я имею ввиду немного другое. В данный момент текст красного блока наезжает на белый, так как высота задана жестко. Я хотел бы чтобы высота красного динамически зависела от его содержимого и при этом чтобы белый блок также увеличивался по высоте и был равен высоте красного.

[origami1024]

https://jsfiddle.net/gqw4hspv/

вот так мож?

[lodbrock]

origami1024, да, благодарю, именно оно. а только средствами css такое не сделать?

[origami1024]

Чтобы значение одного равнялось автоматически рассчитанному значению другого нельзя.

Может какой-то трюк можно придумать из того, что можно указывать двум блокам одинаковое значение - например 50% или css переменную...