title: First flex item in a row disappearing outside left viewport edge without access via scroll
body: <p>I have a flex container with three flex items in a row.  </p>
  
  <p>I'm trying to understand why when the screen isn't wide enough to accommodate all content, the 1st flex box gets truncated.</p>
  
  <p>My expectation is that the horizontal scroll bar on <code>.boxes_container</code> allows all the content in <code>#boxa</code> to be visible provided we scroll.</p>
  
  <p>Some quick notes:  </p>
  
  <ul>
  <li><p>Fixed widths are intentional.</p></li>
  <li><p>In <code>.boxes_container</code>, <code>justify-content:center</code> is intentional. In the actual implementation the boxes are dynamic and I want the boxes to be centered if for example only one is visible.</p></li>
  </ul>
  
  <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>.boxes_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 77vh;
    /* We need to set an explicit height here that translates into a real value
     or scroll bars will not work because heights need a concrete value 
    */
    overflow-x: auto;
  }
  #boxa {
    background-color: #994400;
    display: flex;
    flex-direction: column;
    flex: 0 0 620px;
    height: 100%;
    /*
     .boxa_content{
      flex: 1 1 auto;
      overflow-y: auto;
     }
      */
  }
  #boxb {
    background-color: #449900;
    display: flex;
    flex-direction: column;
    flex: 0 0 620px;
    height: 100%;
    padding: 5px;
    border: 2px solid #DDD;
    border-radius: 8px;
  }
  #boxb .preview_content {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  #boxc {
    display: flex;
    flex: 0 0 500px;
    height: 100%;
    flex-direction: column;
    overflow-y: auto;
    padding: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="boxes_container"&gt;
    &lt;div id="boxa"&gt;
      &lt;h1&gt;Stuff kajsdlkaj laksdjlka jslkdja sldjals jdlaksjd lkajs dlkajs dlkjas lkdjal ksdjalks jdlaj &lt;/h1&gt;
    &lt;/div&gt;
    &lt;div id="boxb"&gt;
      &lt;h1&gt;Stuff2 a;sldka;lskd a;lksd ;laks;dl kas;ldk a;lskd; laksd;la ksd;lak s;dlka s;ldlk a;lslkd ;alskd ;lask d;&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div id="boxc"&gt;
      &lt;h2&gt;slkjdflksjd lfsjdklfs jdlkfjs ldkfjs ldkfj sl&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2><a href="http://codepen.io/anon/pen/GNQroN?editors=1100" rel="nofollow noreferrer">codepen demo</a></h2>