title: flex and overflow : weird behaviour
body: <p><strong>EDIT: added flex-direction: column, missed it in the initial code.</strong></p>
  
  <p>When the child has <code>overflow:auto</code> and the parent has <code>overflow:auto</code>, the scrollbars appear on the child.</p>
  
  <p>But when <code>overflow:auto</code> is removed from the <code>parent</code>, the scrollbars appear on the <code>grand-parent</code> .</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%;
    overflow: hidden;
    font-family: "Roboto", sans-serif;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  .App {
    display: flex;
    height: 100%;
  }
  
  .grand-parent {
    display: flex;
    flex-direction: column;
    background: red;
    overflow: auto;
    padding: 20px;
  }
  
  .parent {
    display: flex;
    overflow: auto;
    padding: 20px;
    background: green;
  }
  
  .child {
    overflow: auto;
    font-size: 156px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="App"&gt;
    &lt;div class="grand-parent"&gt;
      &lt;div class="parent"&gt;
        &lt;div class="child"&gt;
          Some content which grows bigger
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why is that? I would still expect the scrollbars to appear on the child.
  How is the browser layout algorithm working here?</p>
  
  <p>EDIT:</p>
  
  <p>weirdly enough, the behavior seems to depend on the <code>grand-parent</code> having <code>flex-direction: column</code>. It works as I expect when <code>flex-direction: row</code></p>
  
  <p><a href="https://i.stack.imgur.com/EwdSH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EwdSH.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/VFzdU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VFzdU.png" alt="enter image description here"></a></p>
  
  <p>tested on Chrome 75, firefox 67</p>
  
  <p>This seems to have something to do with flex-direction on the grand-parent, if flex-direction is row, the horizontal scroll shows this behavior, if flex-direction is column, the vertical scroll shows this behavior </p>
  
  <p>EDIT: 
  On further experiment, If we set min-height: 0 on parent, it behaves as expected, so this issue might be similar to </p>
  
  <p><a href="https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/" rel="nofollow noreferrer">https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/</a></p>
  
  <p><a href="https://css-tricks.com/flexbox-truncated-text/" rel="nofollow noreferrer">https://css-tricks.com/flexbox-truncated-text/</a></p>