I am trying to make the following pen work: https://codepen.io/milfhunter/pen/KKVEzYV
<div class="d-flex flex-column h-100">
<div class="header">header</div>
<div class="body h-100 d-flex flex-grow-1">
<div class="sidenav">
<h1>scrollable sidenav</h1>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
</div>
<div class="content flex-grow-1">
<h1>scrollable content</h1>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
</div>
</div>
</div>
* { box-sizing: border-box }
html { height: 100vh; }
body { height: 100%; }
.sidenav, .content { overflow-y: scroll; }
.header { background-color: skyblue; }
.sidenav { background-color: orange; }
.content { background-color: white; }
- The header has no fixed height. (working)
- Sidenav and content section should provide a scrollbar on overflow. (working)
- The sidenav and content section should fill exactly the remaining page space. (not working, because they actually take up too much space horizontally causing the most outer scrollbar)
How can we fix this? Thanks. <3
