https://i.sstatic.net/j3VOr.png
https://codepen.io/leon-yum/pen/GxWqMe?editors=1100
Attempting to replicate an issue encountered in one of our applications. The Sidebar within our app never expands 100% to accommodate the content. The <div class="content-body"> in the example above also does not reach the full height.
HTML Markup:
<body>
<div id="app">
<section class="h100 w100">
<main>
<header>Header</header>
<section class="content">
<div class="sidebar">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>
<div class="content-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et urna vulputate, venenatis tellus eget, vehicula risus...
</p>
</div>
</section>
</main>
</section>
</div>
</body>
CSS Styling:
body {
margin: 0;
font-family: Arial;
color: white;
}
.w100 { width: 100%; }
.h100 { width: 100%; }
header {
padding: 20px;
/* width: 100%; */
height: 20px;
color: brown;
background: cyan;
}
#app {
width: 100%;
height: 100%;
background: #212121;
}
.content {
display: flex;
flex: 1 1 auto;
height: 100%;
}
.content-body {
flex: 1 1 auto;
padding: 20px;
background: #333;
}
.sidebar {
background: #666;
}