Сделать гибкий элемент той же ширины, что и родитель
Я пытаюсь создать слайдер, используя flex-боксы. Идея, которую я имею, состоит в том, чтобы создать родительский контейнер и иметь ползунки, переполняющие горизонтально. Затем родительский элемент будет настроен на отсутствие переполнения, чтобы переполняющие дочерние элементы были скрыты, и мы могли использовать полосу прокрутки для просмотра других дочерних элементов.
.slider-container {
width: inherit;
height: 40em;
overflow: hidden;
margin-bottom: 1000px;
}
.slider {
display: flex;
flex-direction: row;
overflow-x: scroll;
height: inherit;
}
.slide {
height: inherit;
}
.x {
background-color: green;
}
.y {
background-color: red;
}
.z {
background-color: blue;
}<div class = "slider-container">
<div class = "slider">
<div class = "x">XXXXX</div>
<div class = "y">YYYYY</div>
<div class = "z">ZZZZZ</div>
</div>
</div>На изображении ниже показан результат, который я получаю сейчас. Я пытаюсь сделать так, чтобы три div имели полную ширину родительского контейнера. Таким образом, только красный div должен быть виден, пока он занимает пространство родительского div. Чтобы просмотреть остальные элементы div, мы должны прокрутить вправо.
Я попытался установить ширину на 100%, но это не работает.
Ответы 1
Вы можете установить flex: 0 0 100% (не увеличивать, не сжимать, базовая ширина составляет 100% от родительской) для div:
.slider-container {
width: inherit;
height: 40em;
overflow: hidden;
margin-bottom: 1000px;
}
.slider {
display: flex;
height: inherit;
transform: translateX(-100px);
}
.item {
flex: 0 0 100%;
}
.x {
background-color: green;
}
.y {
background-color: red;
}
.z {
background-color: blue;
}<div class = "slider-container">
<div class = "slider">
<div class = "item x">XXXXX</div>
<div class = "item y">YYYYY</div>
<div class = "item z">ZZZZZ</div>
</div>
</div>Эффект прокрутки работает нормально, если убрать flex: 0 0 100%, но в такой ситуации он снова становится маленьким.
Используйте transform: translateX(-100px); и удалите `overflow-x: scroll; `. Я обновил пример.
Большое спасибо, это именно то, что я искал. Если бы вы могли, можете ли вы объяснить, почему весь div .slider смещается вправо, когда присутствует overflow-x: scroll? и работает так, как я, за исключением случаев, когда он удален.
Извините, я не могу :). Некоторая идиосинкразия во взаимодействии между ними.
@Muljayan это из-за поля по умолчанию в теле (8 пикселей). При добавлении overflow:scroll вы видите небольшую часть второго div справа в 8px от поля.
Привет, когда я делаю .slider с translateX (50px), почему весь гибкий блок сжимается, а не дает эффект прокрутки?