title: Overflowing content in flexbox item
body: <h1>What combination of wrappers and height settings is needed to capture long content in a flexbox item?</h1>
  
  <hr>
  
  <p>Adding overflow-y to immediate parent and/or parents highter up don't appear to solve the problem. I'd like to avoid setting specific pixel height if possible.</p>
  
  <p>In actual example only the upper left element has a 'fixed' sized (actually just a minimum) with the rest being allowed to stretch.</p>
  
  <p>Have done my best to reproduce below and in jsfiddle <a href="https://jsfiddle.net/a1q9nk62/1/" rel="nofollow noreferrer">here</a>.</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{
   box-sizing: border-box;
   width:100%;
   height:100%;
   margin:0px;
   padding:0px;
  }
  *,
  *:before,
  *:after {
   box-sizing: inherit;
  }
  #outer{
   width:100vw;
   height:100vh;
   display: flex;
   border: 2px solid black;
  }
  
  #main_left{
   flex:1;
   border:2px solid blue;
   min-width: 300px;
  
   display: flex;
   flex-direction: column;
  }
  
  #main_right{
   flex:1;
   border:2px solid red;
  }
  
  #left_top{
   flex: 1;
   border:2px solid green;
   min-height: 300px;
  }
  #left_bottom{
   flex:1;
   border:2px solid yellow;
  
   display: flex;
  }
  
  #controls_left, #controls_right{
   flex: 1;
   border: 2px solid black;
  }
  #controls_left{
   min-width: 60%;
  }
  .hideelem{
   display: none;
  }
  
  #dd{
   overflow-y: scroll;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outer"&gt;
   &lt;div id="main_left"&gt;
    &lt;div id="left_top"&gt;
     left_top
    &lt;/div&gt;
    &lt;div id="left_bottom"&gt;
     &lt;div id="controls_left"&gt;&lt;/div&gt;
     &lt;div id="controls_right"&gt;
      &lt;div id="dd_container"&gt;
       &lt;button onclick='document.getElementById("dd").classList.toggle("hideelem")'&gt;show/hide&lt;/button&gt;
       &lt;div id="dd"&gt;
        &lt;ul&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
         &lt;li&gt;foobar&lt;/li&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div id="main_right"&gt;
    right
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>