Flex-Wrap внутри Flex-Grow

Этот вопрос похож на Flex-поле с оберткой внутри другого Flex-блока, но решение не найдено.

Здесь структура:

<div> // flex wrapper
    <div></div> // flex: 1 1 80%;
    <div></div> // flex: 1 1 20%;
</div>

Второй дочерний элемент оболочки также содержит дочерние элементы, и этот ребенок также имеет к нему flex-wrap: wrap;. Проблема заключается в том, что он не расширяется, как вы ожидали, учитывая flex: 1 1 20%;, когда добавляется больше детей, чем будет соответствовать его текущей ширине.

Вы можете увидеть это поведение в этой скрипте, нажав кнопку "Дополнительно", пока не перейдут другие дочерние дочерние элементы. Вот скриншот:

Скриншот проблемы

Как второй ребенок может продолжать расширяться, когда добавляются еще внуки?

Ответы