Элемент Flexbox расширяется за пределы контейнера, если место существует ⇐ CSS

[Anonymous]

Может быть глупый вопрос.
Это то, что у меня сейчас есть


Ожидайте, что высота 3 может меняться в зависимости от его содержимого и высоты правые элементы 1, 2, 3 и т. д. имеют разную высоту. Есть ли способ, чтобы элементы 4 и ниже (которые ниже 3) могли занимать всю ширину контейнера вместо того, чтобы ограничиваться гибким контейнером?
Я пытаюсь избежать чего-либо программно и желательно использовать только гибкий интерфейс.

Код: Выделить всё

div {
font-size: 30px;
}

.firstDiv {
background-color: red;
height: 100px;
}

.secondDiv {
background-color: gray;
height: 100px;
}

.thirdDiv {
background-color: green;
height: 150px;
flex: 1;
}

.fouthDiv {
background-color: yellow;
height: 100px;
}

Код: Выделить всё

1
2
4


3

Подробнее здесь: https://stackoverflow.com/questions/786 ... ace-exists