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 ui-layout which is still quite new (and buggy).
Given a Codepen
<body ng-controller="AppCtrl" layout="row" layout-fill>
<div flex="33" class="blue">left</div>
<div flex="66" class="green" layout-fill>
<div layout="column" layout-align="start start">
<div flex="25">above</div>
<div flex="75">below</div>
</div>
</div>
</body>
why am I unable to see the nested column layout properly? I would expect above to horizontally take 25% of the right-hand side of the page and below the rest 75%. What am I doing wrong, or is this even possible using the layout directive?
Change
to
The reason your original code did not work is because layout="column" does not automatically fill height to 100% of it's containing element.