使弹性项与父项具有相同的宽度

Question

我正在尝试使用flex Box创建滑块。我的想法是创建一个父容器，并使滑块水平溢出。然后将父元素设置为无溢出，这样溢出的子元素就被隐藏了，我们可以使用滚动条查看其他子元素。

.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可见。要查看其余div，必须向右滚动。

我尝试过将宽度设置为100%，但似乎不起作用。

Answer 1

您可以在divs上设置flex:0 0 100%（不增长，不收缩，基本宽度为父级的100%）：

css prettyprint-override">.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>