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

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

您可以flex: 0 0 100%在 div 上设置（不增长，不收缩，基本宽度为父级的 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>