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

Question

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

.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

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

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