Yes, this solution seems to be effective.
It's crucial to include max-height to prevent the column from expanding uncontrollably, and in this case, it has been set to 100vh.
Check out the Codepen Demo
I am assuming that you didn't intend for the headers/footers to have a position:fixed, as that would remove them from the document flow and not impact the height of non-positioned elements.
Instead, I believe you meant that the main content should fit between them regardless of their size and overflow when necessary.
I've also added a hover effect on the content section to showcase the overflow functionality.
body {
padding: 0;
margin: 0;
}
.container {
height: 100vh;
max-height: 100vh;
width: 80%;
margin: auto;
display: flex;
flex-direction: column;
}
div {
flex: 0 0 auto;
}
.one {
background: lightblue;
}
.two {
background: lightgreen;
}
main {
flex: 1 1 auto;
overflow-Y: auto;
background: pink;
}
main:hover .expander {
height: 1000px;
}
p {
padding: 0 1em;
margin: 0;
<div class="container">
<div class="header one">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, alias mollitia. Laborum et cupiditate</p>
</div>
<div class="header two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex excepturi molestiae voluptates nesciunt, recusandae error,</p>
</div>
<main>
<div class="expander"></div>
</main>
<div class="footer one">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur incidunt, esse quaerat illum ipsa. Reiciendis corrupti aliquid placeat</div>
<div class="footer two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum rerum tempore dolor tenetur expedita eligendi nemo numquam veniam laboriosam.</p>
</div>
</div>