Side Column Block Container

This is a two column, nested flexbox sticky-footer layout with an inner sticky footer column and a second, full-height sidebar. The containers rely on negative margins and media queries to re-order presentation.

The Main element is set to "flex:1 0 auto" and "align-items:stretch". Main is also set to "display: inline-flex" within a 920px media query.

The sidebar and content containers are block elements. The content container is set to "display:flex" and is an inner sticky-footer.

The order of the containers are controlled with negative margins and a float.

The inner sticky-footer content container is not sticky in mobile-first mode. The sticky footer effect is triggered at wider widths by imposing "display:inline-flex;" on the Main container.

The inline-block elements did not stretch to full height in a "display:flex" container. The inline-block elements do stretch within an "inline-flex" container.

Other CSS patterns embedded within this layout:

• Because of CSS, setting height on the body element is necessary to stretch the HTML element to full height. I've found that for sticky flex the declaration is "height:100%". However, for the nested sticky-flex to work, the body element needs to be declared as "min-height:100%".
• I used the Philiip Walton Sticky footer pattern for the sticky footer as well as the inner sticky footer
• The sticky-footer flex requires a height:100% declaration on the body element, whereas the inner-sticky flex requires min-height:100% – Both declarations are here.
• "Display:inline-flex" is required to stretch child inline-block elements.

An array of min-height, min-width, vh values needed to control layout.

This layout does not require a wrapper container to contain the nested layout.

Tutorial Links:

https://makandracards.com/makandra/39473-stretching-an-html-page-to-full-height

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Inline-block Fill