Fills are simple (i.e. single element) layout abstractions that leverage flexbox to fill in the remaining horizontal, or vertical, space of their containers. They are useful only in occasions where the parent element is already set to display: [inline-]flex;. Most useful as a mixin for components rather than a direct class - but we've supplied examples so you can see the fills in action.

Horizontal

Fill the available horizontal space.

HTML

<style>
.g-showFill {
    border: 1px solid blue;
}
</style>
<div style="display flex; height: 500px; width: 500px; border: 1px solid gray;">
    <div class="l-fillHorizontal g-showFill">
        <div>Some content here.</div>
    </div>
</div>

Vertical

Fill the available vertical space.

HTML

<style>
.g-showFill {
    border: 1px solid blue;
}
</style>
<div style="display: flex; height: 500px; width: 500px; border: 1px solid gray;">
    <div class="l-fillVertical g-showFill">
        <div>Some content here.</div>
    </div>
</div>