title: Overflow hidden with nested overflow scroll not working
body: <p>I have a problem with a div not being clipped to the parent even though it has <code>overflow: hidden</code>.</p>
  
  <p>I've looked through the <code>overflow: hidden</code> questions here on stackoverflow but most of them either have problems with <code>position</code> or seem to suggest that my code should work.</p>
  
  <p>Here's a MWE, you can find the <strong>jsfiddle <a href="https://jsfiddle.net/huocukw7/1/" rel="noreferrer">here</a></strong>:</p>
  
  <pre><code>&lt;div id="parent"&gt;
    &lt;div id="scroller"&gt;
      &lt;div id="child"&gt;
        meh
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#parent {
    height: 500px;
    overflow: hidden;
  }
  
  #scroller {
    overflow: scroll;
  }
  
  #child {
    height: 10000px;
  }
  </code></pre>
  
  <h3>What I expect</h3>
  
  <p><code>#parent</code> has <code>overflow: hidden</code> so <code>#scroller</code> gets clipped to the height of parent. Because its <code>#child</code> is taller than the resulting height <code>overflow: scroll</code> results in a scrollbar.</p>
  
  <h3>What happens</h3>
  
  <p><code>#scroller</code> just uses the height of <code>#child</code> and ignores both <code>overflow</code> properties.</p>
  
  <h3>What about simple workarounds?</h3>
  
  <ul>
  <li>In my real world problem there is multiple <code>&lt;div&gt;</code>s in <code>#parent</code> so I can't give <code>#scroller</code> a height.</li>
  <li>The html is generated automatically so I can't just remove <code>#scroller</code>.</li>
  </ul>
  
  <p>Thanks for all help,
  Stefan</p>
  
  <h1>ANSWER</h1>
  
  <p>There actually is a CSS-only answer in the comments with <code>display: flex</code>. See:</p>
  
  <p><a href="https://jsfiddle.net/huocukw7/6/" rel="noreferrer">https://jsfiddle.net/huocukw7/6/</a> </p>
  
  <pre><code>#parent {
    height: 500px;
    overflow: hidden;
    display: flex;
    flex-direction:column;
  }
  
  #scroller {
    overflow: auto;
    flex-grow:1;
  }
  
  #child {
    height: 10000px;
  }
  </code></pre>