I'm having difficulty extending the left navigation section to reach the bottom of the page while remaining responsive. Despite trying various solutions like h-100, flex-grow, min-vh-100m self-align: stretch, nothing seems to solve the issue.
Check out my Codepen for reference (You may need to increase the height of the output window):
https://codepen.io/ma66ot/pen/KKQZXew
HTML
<div class="col-md-3 col-lg-2">
<div class="logo">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/300px-Circle_-_black_simple.svg.png" id="circle" alt="">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="navigation ">
<div class="title-nav">
<img src="./assets/verwaltung.png" alt="" id="verwaltung-logo">
</div>
<div class="button-container">
<ul>
<li><a href="home"><button type="button" class="btn btn-primary btn-lg btn-block">Overview</button></a></li>
<li><a href="trainers"><button type="button" class="btn btn-primary btn-lg btn-block">Trainers</button></a></li>
<li><a href="participants"><button type="button" class="btn btn-primary btn-lg btn-block">Participants</button></a></li>
<li><a href="groups"><button type="button" class="btn btn-primary btn-lg btn-block">Groups</button></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 col-lg-10">
<div class="main-window">
</div>
</div>
</div>
</div>
</div>
CSS
h2 {
width:100%;
}
html button {
border: 0;
width: 100%;
}
html ul {
list-style-type: none;
padding: 0;
margin: 0;
}
html .container-fluid {
padding: 1em;
}
#circle{
width: 100%;
height: 100%;
}
#verwaltung-logo {
width: 50%;
height: 50%;
}
html .links {
padding-right: 3em;
}
/* Navigation */
html .navigation {
background: #FFA500;
border-radius: 48px;
padding: 1em;
margin-top: 1em;
}
li {
margin-top: 1em;
margin-bottom: 1em;
}
.button-container{
width: 80%;
margin: auto;
}
.navigation a {
color: white;
text-decoration: none;
}
.main-window {
background: #FF6E13;
border-radius: 48px;
overflow-y: scroll;
height: calc(100vh - 2em);;
}
/* Hide scrollbar for Chrome */
.main-window::-webkit-scrollbar {
display: none;
}
.main-window {
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.main-window button {
border-radius: 10px !important;
}