title: Why child divs don't extend beyond flex row container
body: <blockquote>
    <p>See problem in codepen: <a href="https://codepen.io/pencillrpal/pen/QWLOLGv" rel="nofollow noreferrer">https://codepen.io/pencillrpal/pen/QWLOLGv</a></p>
  </blockquote>
  
  <p>I have a flex container in which I'm going to have a horizontal slider with elements as long as the full page width.</p>
  
  <p>But I realized I can't control the width of the child elements, because they will always have a width that makes them fit the container, and they don't extend beyond it.</p>
  
  <p>I've found a trick though. If I wrap my child divs to a div one by one it will work as I want it to.</p>
  
  <p><strong>Why does this work this way?</strong></p>
  
  <pre><code>.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 40vh;
    max-width: 100%;
    overflow-x: hidden;
    border: 5px solid black;
    margin: 0 auto;
  }
  
  .box {
    position: relative;
    width: 90vw;
    margin: 10px;
    line-height: 10vh;
    text-align: center;
    background: black;
    color: white;
    border: 5px solid red;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;Box should have 100vw width&lt;/h1&gt;
  &lt;div class="container"&gt;
    &lt;div class="box"&gt;
      &lt;h3&gt;Box&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;h3&gt;Box&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;h3&gt;Box&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h1&gt;This one has though&lt;/h1&gt;
  &lt;div class="container"&gt;
    &lt;div&gt;
      &lt;div class="box"&gt;
        &lt;h3&gt;Box&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div class="box"&gt;
        &lt;h3&gt;Box&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div class="box"&gt;
        &lt;h3&gt;Box&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>