I have a simple setup with:
# Header# Content# FooterI want Content to stretch to all available space (if it needs more show scroll), and it works:
body { margin: 0; font-size: 2em;}.container { background-color: bisque; display: flex; flex-direction: column; height: 100vh;}.header { background-color: #846267; height: 50px;}.content { background-color: #AEB4A9; /* height: calc(100vh - 100px); */ overflow-y: auto; height: 100%;}.footer { background-color: #D89A9E; height: 50px;}<html><body><div class="container"><div class="header">Header</div><div class="content"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><div class="footer">Footer</div></div></body></html>Header and Footer are always visible and Content stretches and shrinks as needed to fill all the available space but no more (even if it overflows).
As you can see for this it is not even needed flexbox.
But if I go for a slightly more complicated setup:
# Header# Content ## H3 ## Subcontent# FooterAnd now I want the Subcontent to stretch to all available space (and if it needs more, show scroll). Then everything is a mess:
body { margin: 0; font-size: 2em;}.container { background-color: bisque; display: flex; flex-direction: column; height: 100vh;}.header { background-color: #b2cf5a; height: 50px;}.content { background-color: #AEB4A9; height: 100%; display: flex; flex-direction: column;}.sub-content { overflow-y: auto; flex-grow: 1; background-color: #dbe2d6;}.footer { background-color: #D89A9E; height: 50px;}<html><body><div class="container"><div class="header">Header</div><div class="content"><h3>Content</h3><div class="sub-content"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div><div class="footer">Footer</div></div></body></html>There are 2 scroll bars. Only one should be necessary.
The sub-content is taken more space than it should be
The Footer is not visible because sub-content is taken up too much space.
Image may be NSFW.
Clik here to view.
I tryed with and without flexbox, but I can not manage to keep all the page layout elements visible. And force Subcontent to streches and shrinks properly.
