Flexbox -how to get first child 50% widht and 100% height while stacking remaining children? : <p>I can't do much with the markup, if I could I'd just add 2 containers side by side. Basically it is a UL that looks like this:</p>

<pre><code>&lt;ul&gt;
   &lt;li&gt;one&lt;/li&gt;
   &lt;li&gt;two&lt;/li&gt;
   &lt;li&gt;three&lt;/li&gt;
   &lt;li&gt;four&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I need the first child to fill the height of the container at 50% width. The remaining children should have 50% width but auto height and stack on the right side of the container.</p>

<p><a href="https://i.stack.imgur.com/KVJiQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KVJiQ.jpg" alt="enter image description here"></a></p>
