title: flexbox parent smaller than child elements on browser resize
body: <p>Why is the parent smaller than the children on narrow screens?</p>
  
  <p>See snippet... then resize your browser (width-wise) to be smaller than the pink box. The scroll bars should appear. Scroll back to the right on the page and note the green background is smaller than the pink area and there is a white spot on the right. </p>
  
  <p><a href="https://i.stack.imgur.com/wNAc2.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/wNAc2.jpg" alt="enter image description here"></a></p>
  
  <p>So few questions:</p>
  
  <ol>
  <li><p>Why does it happen?</p></li>
  <li><p>How do I prevent the parent div's green background from getting smaller than the pink box/div when the browser is resized <strong>without</strong> setting an explicit width on the parent (or anywhere else) or using <code>overflow:hidden</code>?</p></li>
  <li><p>Is there a flexbox solution to this problem?</p></li>
  </ol>
  
  <p>Thanks,</p>
  
  <p>Thomas</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
    height: 400px;
    background-color: green;
    display: flex;
  }
  
  .item {
  
    height: 100px;
    background-color: pink;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;div class="item"&gt;looooooooooooooooooooooooooooong&lt;/div&gt;
    &lt;div class="item"&gt;looooooooooooooooooooooooooooong&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>