Control width of flex items arranged vertically in a flex container
<p>I'm trying to achieve the effect where the boxes labeled "HALF", take up only 50% of the width (aka they share the first row evenly).</p>

<p>The base requirement is that they remain in a single container. Is this possible to achieve using flexbox? </p>

<p>I've tried playing around with <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> but I'm afraid I'm not understanding how to make it work, or if it's even possible, given the single container requirement.</p>

<p>Consider this fiddle: <a href="http://jsfiddle.net/GyXxT/270/" rel="noreferrer">http://jsfiddle.net/GyXxT/270/</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>div {
  border: 1px solid;
}

.container {
  width: 400px;
  display: flex;
  flex-direction: column;
}
.child {
  
  height: 200px;
}
.child.half {
  flex: 1 1 10em;
  color: green;
}

.child:not(.half) {

  flex-shrink: 2;
  flex-basis: 50%;
  color: purple; 
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="child half"&gt;
    HALF
  &lt;/div&gt;
  
  &lt;div class="child half"&gt;
    HALF
  &lt;/div&gt;
  
   &lt;div class="child"&gt;
    FULL
  &lt;/div&gt;
   &lt;div class="child"&gt;
    FULL
  &lt;/div&gt;
  &lt;div class="child"&gt;
    FULL
  &lt;/div&gt;
   &lt;div class="child"&gt;
    FULL
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>