In my current project, I am attempting to design a layout with a fixed header and footer along with a dynamic content area that utilizes the remaining vertical space. The content-wrapper contains a lot of data, which may require a scrollbar to navigate.
However, I am facing an issue where the main wrapper, meant to set the page height to 200px, is being stretched by the content container.
I do not want to put a max-height on the content-wrapper or use flex-shrink because it disrupts the layout by moving the footer into the content area and causing overlap.
Given these constraints, how can I create a layout with a dynamically sized content area that does not extend infinitely but instead takes up the rest of the page while displaying the provided content within the content wrapper?
div.main-wrapper {
height: 200px;
max-height: 200px;
min-height: 200px;
width: 100%;
min-width: 100%;
display: flex;
flex-direction: column;
background: grey;
}
div.content-wrapper {
flex: 1 0 auto;
}
div.content {
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
}
div.header,
div.footer {
height: 50px;
max-height: 50px;
min-height: 50px;
background-color: green;
min-width: 100%;
width: 100%;
}<div class="main-wrapper">
<div class="header">FIXED HEADER</div>
<div class="content-wrapper">
<div class="content">
DYNAMIC CONTENT
<br/>DYNAMIC CONTENT
<br/>DYNAMIC CONTENT
<br/>DYNAMIC CONTENT
<br/>DYNAMIC CONTENT
<br/>DYNAMIC CONTENT
<br/>DYNAMIC CONTENT
<br/>DYNAMIC CONTENT
</div>
</div>
<div class="footer">FIXED FOOTER</div>
</div>EDIT:
I have updated my snippet to better demonstrate my real issue, which is as follows: Inside the content wrapper, there is another component (let's call it a black box) that occupies 100% height and width. This layout should work seamlessly with any div inside the content-wrapper without resorting to adding overflow properties. The objective is to have the content wrapper containing the remaining space while restricting the height of the content-div within it to prevent stretching the main-wrapper beyond 200px. In the updated snippet, you can see that the main-wrapper exceeds 200px due to the content area expanding the content-wrapper. How can this problem be resolved without using overflow in the content-wrapper and ensuring the content black box div maintains its dimensions?