split space of a fixed size container equally. a case for flexbox?
<p>How can a HTML/CSS structure be designed, that splits a fixed size container horizontally into three parts. The first part should be as tall as it's content needs. The second and the third part would share the remaining space fifty-fifty - regardless of their contents. If the size of their contents exceeds this limitation, the section should be scrollable.</p>

<p>The HTML part of it is trivial: A <code>div</code> container with three <code>div</code>'s as children.</p>

<p>I tried to solve this with flexbox - however there might be a better choice for this:</p>

<p>The css part:</p>

<pre><code>#container {
  position: absolute;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
}

#item1 { flex: 0 0 auto; }
#item2 { flex: 1 1 auto; }
#item3 { flex: 1 1 auto; }
</code></pre>

<p>Unfortunately this only works if the contents of item 2 or 3 is not too large.</p>

<p>See <a href="https://jsfiddle.net/2vjktkfa/1/" rel="nofollow">this fiddle</a> for a bit more detailed implementation of the problem.</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>body {
  margin: 0;
  overflow: hidden;
}
* {
  box-sizing: border-box;
}
#container {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid green;
  display: flex;
  flex-direction: column;
}
#item1 {
  flex: 0 0 auto;
  background-color: Bisque;
}
#item2 {
  flex: 1 1 auto;
  background-color: DarkOrange;
}
#item3 {
  flex: 1 1 auto;
  background-color: MediumAquaMarine;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;div id="item1"&gt;I'll be as tall as my content takes.&lt;/div&gt;
  &lt;div id="item2"&gt;From the rest, I'll take exactly 50%. No matter how short or long my content is. If needed there should be scrollbars.&lt;/div&gt;
  &lt;div id="item3"&gt;I'll take the other 50% of the rest!
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
    &lt;br&gt;right?
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>