Мобильная версияМоя проблема в том, что контент представляет собой карусель, прокручиваемый список элементов, находящихся в родительском элементе с переполнением: скрыто , но его размер не ограничен родительским элементом гибкого элемента, поэтому он занимает всю ширину всех своих дочерних элементов. Обычно размер такого родительского элемента каким-то образом ограничен, в результате чего он оказывается меньше своего содержимого, что является очень распространенным шаблоном проектирования.
Рассмотрим этот фрагмент с двумя столбцами во внешнем макете. , левая панель (желтая) должна иметь ширину 30 %, а правая панель (зеленая) — 60 %. Внутри левой панели мне нужна горизонтальная карусель, содержащая множество элементов, из которых будут видны лишь некоторые из них, поскольку недостаточно места для их отображения (позже я добавлю правильную механику прокрутки).
Код: Выделить всё
.container {
display: flex;
}
.left-panel {
flex: 0 0 33%;
display: flex;
flex-direction: column;
background-color: yellow;
}
.right-panel {
flex: 1 0 auto;
flex-basis: 66%;
background-color: green;
}
.items {
flex: 1;
overflow-x: hidden;
}
.items-wrapper {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
}
.item {
width: 8rem;
height: 8rem;
background-color: red;
}Код: Выделить всё
Left Panel, this panel is supposed to be only 30% the width of the parent, but is being pushed wider by the children below.
I want the .items div to be the same width as the 33% wide .left-panel, and I'll deal with the scroll/overflow once that is working.
Item
Item
Item
Item
Item
Item
Item
Right Panel Here
См. эквивалентный код codepen https://codepen.io/neekfenwick/pen/ QWRQrVL
Я указал левой панели быть гибкой: 0 0 33%, что, как я думал, заставит ее составлять 33% ширины ее родителя (документа) , поскольку flex-grow равен 0, а flex-basis равен 33%, и любой контент внутри будет иметь соответствующий размер.
Я понимаю, что контент физически больше этого просили 33%. Как я могу заставить элемент .items соответствовать размеру, запрошенному его родителем?
Возможно, меня сбивает с толку то, что .left-panel имеет гибкий интерфейс. направление: столбец, что означает, что главная ось вертикальна, поэтому эффект flex-basis, flex-grow и т. д. становится запутанным, но гибкая ось внешнего .container – это строка по умолчанию, поэтому я не могу определить, что происходит не так.
Я нашел совет в Overflow и содержит flex-child из flex-child, советующего flex -basis: 0, что не помогает.
Этому не поможет даже легкая простуда прямо сейчас. Помощь будет очень признательна
Для пояснения приведу пример, в котором достигается то, что я пытаюсь сделать, но без использования Flexbox. Здесь левая и правая панели представляют собой элементы div с display: inline-block и фиксированной шириной. Посмотрите, как карусель .items ограничена шириной .left-panel, поэтому вы не можете видеть элементы, выходящие за пределы ее ширины.
https:/ /codepen.io/neekfenwick/pen/JjqpZQz
Код: Выделить всё
.container {
/* Container has no flex layout, children have fixed width */
}
.left-panel {
display: inline-block;
vertical-align: top;
width: 33%;
ffflex-direction: column;
background-color: yellow;
}
.right-panel {
display: inline-block;
vertical-align: top;
width: 66%;
background-color: green;
}
.items {
flex: 1;
overflow-x: hidden;
}
.items-wrapper {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
}
.item {
flex: 0 0 8rem;
width: 8rem;
height: 8rem;
background-color: red;
}Код: Выделить всё
An example based on [url=https://codepen.io/neekfenwick/pen/QWRQrVL]This Codepen https://codepen.io/neekfenwick/pen/QWRQrVL[/url] but without using Flexbox, Left Panel, this panel is set to 33% the width of the parent.
The .items div is therefore the same width as the 33% wide .left-panel.
Item
Item
Item
Item
Item
Item
Item
Item
Item
Right Panel Here
Подробнее здесь: https://stackoverflow.com/questions/786 ... x-grow-and
