Почему родительский блок не растягивается под контент?

Question

[Андрей]

Проблему хорошо видно тут: https://codepen.io/andrej-rusinas/pen/PowqpJo

Заметно, что фон класса .menu лежит только под первыми блоками.

Answer 1

[BigSmoke]

Уберите у родителя контейнера элементов (в вашем примере это body) display: flex; и все заработает.

А вообще с автоматическим горизонтальным расширением блока контейнера при flex-direction: column; у флекса есть некоторые особенности.

Answer 2

[Abr_ya]

flex-direction: column; - у вас элементы меню идут не слева направо, а сверху вниз. Упираются в высоту 300 и только после этого вынужденно начинают переноситься. И ширина обвертки получается 104 (ширина одного элемента + его margin).
Не понимаю пока, какое поведение элементов меню вы хотите видеть, поэтому не могу что-то советовать.

Comments

[Андрей]

Мне и нужно, чтобы они шли сверху вниз, а затем переносились в новый столбец.
Но нужно, чтобы фон растягивался под колонки.