Как сверстать такие блоки на flexbox?

Question

[Minusator]

Как сверстать такие блоки на flexbox, чтобы при переполнении контентом в блоках Б и В, блок А подстраивался по высоте.
Блок А слайдер и у него всегда есть max-height, который задается из настроек модуля.
Также хотелось бы чтобы блок Б и В были одинаковые по высоте по отношению друг к другу. height: 50% не работает.

Comments

[Ankhena]

На флексах, без JS - никак.
Используйте гриды

[Minusator]

Ankhena, можно и js если предложите решение

[Ankhena]

Minusator,

можно и js если предложите решение

Так получаете высоту блоков, вычисляете как вам нужно и подставляете.

Но зачем это делать на js, если есть гриды?

[Minusator]

Ankhena, с гридами еще мало знаком. пробую на них делать, но все разъезжается

[Ankhena]

Minusator, так и где ваши попытки-то?
Вы уже 82 вопроса задали и, наверное, уже давно хорошо знаете, что нужно показывать свой код, по возможности в песочнице типа codepen.io

Две колонки, две строки. Всё по 1fr.

Answer 1

[Сергей delphinpro]

Любите вы фигнёй заниматься...
Используйте гриды.

Comments

[Minusator]

Любите вы фигнёй заниматься...

Ага )

Answer 2

[woidead]

html


БЛОК A
БЛОК B
БЛОК C

css

.container {
display: flex;
flex-wrap: wrap;
}

.block {
display: flex;
align-items: center;
justify-content: center;
margin: 5px; /* Просто для отступа, можно настроить как угодно */
}

.block-a {
flex: 1; /* Растягиваем на всю ширину, если один в строке */
max-height: 200px; /* Пример максимальной высоты */
background-color: gray;
}

.block-b,
.block-c {
flex-basis: 100%; /* Занимает всю ширину */
flex-grow: 1; /* Растягивается на доступное пространство по высоте */
}

.block-b {
background-color: red;
}

.block-c {
background-color: green;
}

Comments

[Владислав Лысков]

оформите ответ нормально