Почему вложенный флексбокс не увеличивается на полную ширину? ⇐ Html

[Anonymous]

Рассмотрите следующий HTML/CSS:

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

i am a NESTED flexbox

В конечном итоге это выглядит так:


Обратите внимание, что вложенный флексбокс (голубой цвет фона) не заполняет всю ширину, в то время как внешний флексбокс (желтый фон) делает.
Почему вложенный контейнер flexbox не увеличивается на всю ширину родительского элемента?
Подсказка: я знаю, что могу исправить это с помощью flex: 1, но вопрос в том, почему он ведет себя таким образом, а не в том, как это исправить

Подробнее здесь: https://stackoverflow.com/questions/667 ... full-width