Сделать элемент Flex такой же ширины, как родительский

Question

Я пытаюсь создать слайдер, используя 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%, но она не работает.

Answer 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>