Я пытаюсь создать флексбокс с автоматическим размером и обернутыми элементами, организованными в столбцы, но ширина не соответствует окну...
Вот тело HTML:
И мой CSS-файл:
* { граница: нет; заполнение: 0; маржа: 0; размер коробки: граница-коробка; } тело { высота: 100вх; } #гибкий { позиция: абсолютная; дисплей: гибкий; flex-flow: перенос столбца; разрыв: 10 пикселей; фон: зеленый; высота: 500 пикселей; } .элемент { высота: 80 пикселей; ширина: 80 пикселей; радиус границы: 20 пикселей; фон: красный; }

Как видите, ширина #flex равна 80 пикселям, то есть ширине элемента...
Теперь, если я изменю несколько свойств на:
#flex { flex-flow: перенос строк; высота: авто; ширина: 500 пикселей; }

Высота #flex растет правильно! Как я мог добиться такого поведения по ширине с элементами, организованными в столбцы?
Мобильная версия