title: Nesting column layout inside a row layout
body: <p>I'm trying to accomplish a nested scrollable layout which has a left sidebar and a right container that is divided horizontally. Previously I've used <a href="https://github.com/angular-ui/ui-layout" rel="nofollow">ui-layout</a> which is still quite new (and buggy).</p>
  
  <p>Given a <a href="http://codepen.io/amergin/pen/QbgerG" rel="nofollow">Codepen</a></p>
  
  <pre><code>&lt;body ng-controller="AppCtrl" layout="row" layout-fill&gt;
      &lt;div flex="33" class="blue"&gt;left&lt;/div&gt;
      &lt;div flex="66" class="green" layout-fill&gt;
        &lt;div layout="column" layout-align="start start"&gt;
          &lt;div flex="25"&gt;above&lt;/div&gt; 
          &lt;div flex="75"&gt;below&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>why am I unable to see the nested column layout properly? I would expect <code>above</code> to horizontally take 25% of the right-hand side of the page and <code>below</code> the rest 75%. What am I doing wrong, or is this even possible using the layout directive?</p>