title: overflow:scroll not working on flex items
body: <p>I have three div's:</p>
  
  <ul>
  <li>Div 01</li>
  <li>Div 02 - fixed width 300px</li>
  <li>Div 03</li>
  </ul>
  
  <p>Div 01 and Div 03 should be same width.</p>
  
  <p>Example:</p>
  
  <ul>
  <li>If viewport is 1000px, Div 01 width=350px and Div 03 width=350px,</li>
  <li>If viewport is 800px, Div 01 width=250px and Div 03 width=250px.</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  .flex-item {
    background: red;
    flex: 1 auto;
    height: 400px;
  }
  .middle {
    background: blue;
    width: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
    &lt;div class="flex-item"&gt;This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.&lt;/div&gt;
    &lt;div class="middle"&gt;sd&lt;/div&gt;
    &lt;div class="flex-item"&gt;sd&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>This is work as I want. But I need to add <code>overflow: scroll</code> to flex-item class.</strong></p>
  
  <p>After adding this, it does not work. How to solve it?</p>