Overflowing content in flexbox item

Question

What combination of wrappers and height settings is needed to capture long content in a flexbox item?

---

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.

In actual example only the upper left element has a 'fixed' sized (actually just a minimum) with the rest being allowed to stretch.

Have done my best to reproduce below and in jsfiddle here.

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;
}

<div id="outer">
 <div id="main_left">
  <div id="left_top">
   left_top
  </div>
  <div id="left_bottom">
   <div id="controls_left"></div>
   <div id="controls_right">
    <div id="dd_container">
     <button onclick='document.getElementById("dd").classList.toggle("hideelem")'>show/hide</button>
     <div id="dd">
      <ul>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
       <li>foobar</li>
      </ul>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div id="main_right">
  right
 </div>
</div>