Looking for the best way to adjust a child element to match the height of its parent? I've experimented with various techniques, but haven't had much success. I'm leaning towards using flexbox as it seems to be the latest trend. Here's what I've attempted:
<div class="main h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a href class="navbar-brand">Menu</a>
</nav>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-xs-2 bg-light h-100 pr-3 menuContainer">
<button class="btn btn-outline-primary mt-3 btn-sm btn-block"> Test </button>
<nav class="navbar navbar-light list">
<ul class="navbar-nav flex-column">
<li class="nav-item"><a href="#" class="nav-link">A1</a></li>
<li class="nav-item"><a href="#" class="nav-link">A1</a></li>
</ul>
</nav>
</div>
<div class="col-xs-10 p-0">
Content
</div>
</div>
</div>
body {
height: 100vh;
}
.bg-light {
background-color: green !important;
}
.list {
overflow-y: auto;
height: 100%;
align-items:start
}
.menuContainer {
display: flex;
flex-flow: row wrap;
}
.list {
flex: 1;
background-color: red;
}
http://jsfiddle.net/x1hphsvb/2065/
I ultimately aim to eliminate scrolling so that the menu (red box) begins at the current starting point and finishes exactly where the screen ends.
The goal is also to allow any content instead of Content to have a height: 100% and behave in the same way.
If both the content and menu are larger than the screen, they should automatically add their own scroll - I've used overflow-y: auto for this purpose.