title: How to enable a scrollbar on a flex item?
body: <p>I have a flexbox-based layout with two panels (top and bottom) occupying 1/3 and 2/3 of the viewport, respectively. (Actually there are more panels, but I've distilled it to the minimal example).</p>
  
  <p>The top panel is also a flex container, because I want its children to flow top to bottom and be vertically centered when there is room. When there is more stuff in top panel than would fit in it, I want it to be scrollable, hence <code>overflow: auto</code>. </p>
  
  <p>The problem: the contents of <code>top</code> shrink to its size, even with <code>flex-shrink: 0</code>, and the scrollbar never pops up.</p>
  
  <p>Observe how the <code>content</code> is shrunk in the following demo, even though it has an explicitly specified height:</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>html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
  }
  
  .main {
      display: flex;
      height: 100%;
      flex-direction: column;
  }
  
  .top {
      display: flex;
      flex-direction: column;
      flex-basis: 33%;
      border-bottom: 1px solid #ccc;
      overflow: auto;
      justify-content: center;
      padding: 20px;
  }
  
  .bottom {
      overflow: auto;
      flex-basis: 67%;
  }
  
  .content {
      height: 500px;
      background-color: #eee;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
    &lt;div class="top"&gt;
      &lt;div class="content"&gt;Content&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="bottom"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The questions: </p>
  
  <ol>
  <li><p><strong>How to fix this while preserving the layout requirements?</strong> Disabling <code>display: flex</code> for the top panel gives the desired effect in the demo. I <em>could</em> position contents of <code>top</code> in a flexboxless way, but I lose the benefits of flex layout and the automatic vertical centering. </p></li>
  <li><p><strong>Why does this happen?</strong> References to CSS spec would be welcome.</p></li>
  </ol>