Simple flexbox article

Header and body only

by Rykus0

HTML

<article>
    <header><h1>Flexbox Layout</h1></header>
    <div class="body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam perferendis facilis sit eius voluptatum praesentium enim. Quae dolor id accusantium velit repellat sunt rerum esse mollitia reiciendis harum distinctio eum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam perferendis facilis sit eius voluptatum praesentium enim. Quae dolor id accusantium velit repellat sunt rerum esse mollitia reiciendis harum distinctio eum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam perferendis facilis sit eius voluptatum praesentium enim. Quae dolor id accusantium velit repellat sunt rerum esse mollitia reiciendis harum distinctio eum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam perferendis facilis sit eius voluptatum praesentium enim. Quae dolor id accusantium velit repellat sunt rerum esse mollitia reiciendis harum distinctio eum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam perferendis facilis sit eius voluptatum praesentium enim. Quae dolor id accusantium velit repellat sunt rerum esse mollitia reiciendis harum distinctio eum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam perferendis facilis sit eius voluptatum praesentium enim. Quae dolor id accusantium velit repellat sunt rerum esse mollitia reiciendis harum distinctio eum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam perferendis facilis sit eius voluptatum praesentium enim. Quae dolor id accusantium velit repellat sunt rerum esse mollitia reiciendis harum distinctio eum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam perferendis facilis sit eius voluptatum praesentium enim. Quae dolor id accusantium velit repellat sunt rerum esse mollitia reiciendis harum distinctio...

CSS

article {
    display: flex;
    flex-direction: column;
    height: 100%;
}

header,
.body {
    padding: 0 .5em;
}

header {
    background: #333;
    color: #fff;
    flex-shrink:0;
}

.body {
    overflow: auto;
    background: #ccc;
}

/* reset */
html,
body{
    padding: 0;
    margin: 0;
    height: 100%;
}