Несоответствие выведенных размеров FlexboxCSS

Разбираемся в CSS
Ответить
Гость
 Несоответствие выведенных размеров Flexbox

Сообщение Гость »


Я пытаюсь создать флексбокс с автоматическим размером и обернутыми элементами, организованными в столбцы, но ширина не соответствует окну...

Вот тело HTML:

И мой CSS-файл:

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


Как видите, ширина #flex равна 80 пикселям, то есть ширине элемента...

Теперь, если я изменю несколько свойств на:

#flex { flex-flow: перенос строк; высота: авто; ширина: 500 пикселей; }
Изображение


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

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»