Make flex item have same width as parent

Question

I am trying to create a slider using flex boxes. The idea i have is to create a parent container and have the sliders overflowing horizontally. The parent would then be set to have overflow none so that the overflowing children are hidden and we are able to use the scroll bar to view other child elements.

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

The below image shows the output i am getting now. I am trying to make the three divs to have the full width of the parent container. This way only the red div should be visible while it occupies the space of the parent div. To view the rest of the divs we must scroll right.

I have tried setting the width to 100% but it doesn't seem to work.

Answer 1

You can set flex: 0 0 100% (don't grow, don't shrink, base width is 100% of parent) on the divs:

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