Vertical layouts utilize modern (flexbox) css to create a vertical container whose direct children are either:

• "No shrink" elements that intend to take up their needed rendering size or
• A single "growable" element that wants to utilize all remaining size in the vertical container. This growable element can be optionally set to scroll.

Default

Basic vertical layout example.

HTML

<style>
.g-showVerticalSize {
    border: 1px solid gray;
}
.g-showGrowable {
    border: 1px solid blue;
}
</style>
<div class="l-vertical" style="height: 500px;">
    <div class="l-vertical-noShrink g-showVerticalSize" style="height: 50px"></div>
    <div class="l-vertical-grow g-showGrowable"></div>
    <div class="l-vertical-noShrink g-showVerticalSize"  style="height: 30px"></div>
    <div class="l-vertical-noShrink g-showVerticalSize"  style="height: 70px"></div>
</div>

Default

In this example, the container also serves a vertical scroll bar if the inner context overflows.

HTML

<style>
.g-showVerticalSize {
    border: 1px solid gray;
}
.g-showGrowable {
    border: 1px solid blue;
}
</style>
<div class="l-vertical" style="height: 500px;">
    <div class="l-vertical-noShrink g-showVerticalSize" style="height: 50px"></div>
    <div class="l-vertical-growAndScroll g-showGrowable">
        <div style="height: 600px">
            <p>some content here.</p>
        </div>
    </div>
    <div class="l-vertical-noShrink g-showVerticalSize"  style="height: 30px"></div>
    <div class="l-vertical-noShrink g-showVerticalSize"  style="height: 70px"></div>
</div>