title: How to use overflow-y: auto on vertical flex-item?
body: <p>Here is a <a href="https://jsfiddle.net/w9ryv2Ln/1/" rel="nofollow noreferrer">fiddle</a>.
  Here is the <strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;overflow&quot;&gt;
    &lt;div class=&quot;block&quot;&gt;
      &lt;div class=&quot;header&quot;&gt;
        This is green header
      &lt;/div&gt;
      &lt;div class=&quot;content&quot;&gt;
        this is a lot of content&lt;br&gt; this is a lot of content&lt;br&gt; this is a lot of content&lt;br&gt; this is a lot of content&lt;br&gt; this is a lot of content&lt;br&gt; this is a lot of content&lt;br&gt;
        &lt;button&gt;
        add more
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and <strong>CSS</strong></p>
  <pre><code>.overflow {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.8);
  }
  .block {
    width: 100px;
    background: white;
    max-width: calc(100% - 30px);
    max-height: calc(100% - 30px);
  }
  .header {
    background: green;
    flex: 0 0 auto;
  }
  .content {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
  }
  </code></pre>
  <p>The problem is that if content is long enough to go outside of modal it doesnt add scrollbar but instead overflows <code>.content</code> div.</p>
  <p>I tried using <code>min-height:0;</code>, but it did not help.</p>