Как предотвратить переполнение гибких элементов родительского гибкого элемента без обертывания?
У меня есть флексбокс с flex-direction: row. Дочерние элементы имеют набор min-width. Когда окно уменьшается до точки, в которой достигается min-width, элементы начинают переполнять гибкий контейнер.
.parent {
display: flex;
flex-direction: row;
background-color: red;
}
.child {
min-width: 100px;
flex-basis: 0px;
flex-grow: 1;
margin: 5px;
height: 100px;
background-color: blue;
}<div class = "parent">
<div class = "child"></div>
<div class = "child"></div>
<div class = "child"></div>
</div>https://jsfiddle.net/4t8029q8/
Есть ли способ заставить контейнер растягиваться, чтобы содержать элементы, без явной установки min-width для родительского элемента? Это обеспечивает поведение, которого я пытаюсь достичь, но он слишком жесткий, чтобы вместить переменное количество элементов.
.parent {
display: flex;
flex-direction: row;
background-color: red;
min-width: 330px
}
.child {
min-width: 100px;
flex-basis: 0px;
flex-grow: 1;
margin: 5px;
height: 100px;
background-color: blue;
}<div class = "parent">
<div class = "child"></div>
<div class = "child"></div>
<div class = "child"></div>
</div>https://jsfiddle.net/4t8029q8/1/
Это то, что я хочу, чтобы гибкие элементы никогда не переполняли гибкий контейнер, даже если это заставляет страницу нуждаться в горизонтальной прокрутке.
ПРИМЕЧАНИЕ: у меня есть другая более сложная логика, требующая flex-basis: 0px и flex-grow: 1, поэтому эти строки нельзя удалить.
Ответы 4
вы можете использовать overflow-y: auto в контейнере parent, если прокрутка вас не интересует.
.parent {
display: flex;
flex-direction: row;
overflow-y: auto;/*add this.*/
background-color: red;
}
.child {
min-width: 100px;
flex-basis: 0px;
flex-grow: 1;
margin: 5px;
height: 100px;
background-color: blue;
}<div class = "parent">
<div class = "child"></div>
<div class = "child"></div>
<div class = "child"></div>
</div>Вместо этого вы можете использовать display: inline-flex в родительском контейнере. Но он содержит общий размер своих дочерних элементов. Другой способ - использовать медиа-запросы. Когда размер дисплея достигнет желаемой минимальной ширины, замените display: flex на display: inline-flex.
Вы заставляете свои дочерние элементы иметь определенную ширину, во многом как упомянутое @Michael_B, это по существу создает статическую среду, в которой они останутся установленной шириной независимо от родительского элемента.
По сути, на этом этапе, поскольку вы знаете минимальную ширину своих дочерних элементов, я бы создал медиа-запрос с конкретным требованием ширины, которое в данном случае составляет 100 пикселей. Как только ваш экран достигнет указанного размера, заставьте вашего родителя обернуть элементы, добавив flex-wrap: wrap; вашему родителю. Когда вы находитесь за пределами указанной ширины, не забудьте вернуть родительский CSS, чтобы не разрешать перенос, flex-wrap: nowrap;. Это позволит вашим дочерним элементам обернуться, а родитель создаст горизонталь по отношению к странице.
к сожалению, в этом случае нельзя обернуть
Установите display: inline-flex в классе .parent, чтобы изменить его на встроенный элемент. Это также заставит .parent расшириться, чтобы содержать своих дочерних элементов. Затем, установив min-width: 100% в классе .parent, он заставит его расшириться до 100% содержащего элемента.
.parent {
display: inline-flex;
flex-direction: row;
background-color: red;
min-width: 100%;
}
.child {
min-width: 100px;
flex-basis: 0px;
flex-grow: 1;
margin: 5px;
height: 100px;
background-color: blue;
}
.parent расшириться, чтобы содержать своих дочерних элементов. Правильно. Он ничем не отличается от display: flex с точки зрения родительского контейнера. Ширина контейнера никогда не меняется.
Единственное отличие (которое в данном случае кажется ключевым) состоит в том, что с inline-flex дети не могут переполнять контейнер.
min-width: 1px; на растягивающемся ребенке решил проблему для меня.
В моем случае сработало простое добавление min-width к ребенку; Я не использовал inline-flex на родительском.
Все, что мне было нужно, это min-width на родительском
Вы просите контейнер плавно изменять размер, чтобы предотвратить переполнение дочерних элементов. Это динамическое поведение, которое является областью JavaScript, а не HTML или CSS.
Поскольку механизмы рендеринга HTML и CSS не перенаправляют автоматически исходные документы, когда дочерние элементы переполняют свой контейнер, у контейнера нет возможности узнать, когда дочерние элементы переполнились и, следовательно, расширились. Вы находитесь в статической среде. Эта концепция применима и к упаковке.
Вот более подробное объяснение (которое охватывает поведение упаковки, но также относится и к переполнению):
Вам понадобится сценарий или, возможно, медиа-запросы, чтобы ваш макет работал должным образом.
собирался принять, но ответ Робертса действительно работает без необходимости устанавливать жесткую ширину. Не хотите ли прокомментировать, как его ответ соответствует тому, что вы объяснили?
Этот ответ на самом деле не отвечает на ваш вопрос: «Как заставить родителя гибкости растягиваться, чтобы соответствовать дочерним элементам?» Родительский элемент flex никогда не расширяется; он остается фиксированным. Это была проблема, которую я рассмотрел, и она остается актуальной. Однако этот ответ предотвращает переполнение детей, что, похоже, именно то, что вам действительно нужно (поэтому я +1). Я рад, что ты нашел решение.
он хоть расширяется? Я могу полностью сжать окно до тех пор, пока минимальная ширина не будет соблюдена (и элементы не будут переполняться), или увеличить окно до тех пор, пока я хочу, и flex-items / parent беспрепятственно растут. Обновлено: не споря, кстати, я просто хочу понять.
Хорошо, я понимаю, о чем вы говорите. Но все равно расширения нет. В вашем коде контейнер сжимается ниже размера содержимого (никогда не расширяется). В принятом ответе он перестает сжиматься при содержании min-width (но, опять же, никогда не расширяется).
Для ясности, поскольку контейнер во всех случаях покрывает 100% ширины области просмотра, я не говорю о изменении размера экрана (где есть очевидное расширение контейнера). Я говорю о расширении контейнера для размещения дочерних элементов.
А, я понимаю, что ты имеешь в виду. «Расширить» - неправильный термин, поскольку 100% ширина будет «расширяться» вместе с окном, но на самом деле это статическая ширина. Скорее, он имеет неявный min-width, равный его содержимому из-за inline-flex. Как вы сказали, предотвращение переполнения - это действительно то, что я хотел, и inline-flex - элегантный способ сделать это. Я правильно понимаю?
Да. Теперь мы на одной странице :-)
прокрутка на странице - это то, что я ищу, но, к сожалению, у самого div нет прокрутки.