FLEXBOX ROWS

by bizamajig

HTML

<div style="padding:10px; height:90%;">

<section class="bizamajig-flex-container-rows" >
    <header class="bizamajig-flex-container-rows-header" >This is a header</header>
    <article class="bizamajig-flex-container-rows-content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    <footer class="bizamajig-flex-container-rows-footer" >This is a footer</footer>
</section>
</div>

CSS

html, body {
    height: 100%;    
}
.bizamajig-flex-container-rows {
    display: flex;
    flex-direction: column;
    height: 100%;
    
    width: 100%;
    background-color: red;
}

.bizamajig-flex-container-rows-header {
    background-color: gray;
}
.bizamajig-flex-container-rows-content {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}
.bizamajig-flex-container-rows-footer {
    background-color: gray;
}