I am currently using flexbox to structure a web application. While it is functioning as expected for most parts, I am encountering an issue with the main content area. The "router-view" element has the desired full height, but the nested div inside of it does not extend to fill the entire height of the router-view container.
How can I ensure that the div with the ID "make-full-height" occupies the full height of its parent container?
I have attempted to set the height to 100%, but unfortunately, this solution did not work.
HTML
<div class="full-screen flex-container-column">
<div class="header no-flex">
Fixed Header
</div>
<!--The router-view IS full height-->
<router-view class="flexible">
<div id="make-full-height">
How do I make this div full height?
</div>
</router-view>
<div class="footer no-flex">
Fixed Footer
</div>
</div>
CSS
.full-screen {
height: 100vh;
}
.flex-container-column {
display: flex;
flex-direction: column;
}
.no-flex {
flex: 0 0 auto;
overflow: auto;
}
.footer {
height: 30px;
background: #555;
color: white;
}
.header{
height: 50px;
background: #555;
color: white;
}
.flex-container {
flex: 1 1 auto;
display: flex;
overflow: hidden;
}
.left, .right {
width: 200px;
background: #eee;
}
.flexible {
flex: 1 1 auto;
}