Is it possible to get the stretch behavior of display: flex when min-content would not fill the page, but still have good scrolling behavior if min-content is larger than the page size?
Essentially if the behavior second code snippet doesn't fill the page, I want the behavior of the first code snippet.
* { margin: 0.5rem;}html,body { width: 100%; height: 100%; margin: 0; padding: 0;}body { display: flex; flex-direction: column; flex-wrap: nowrap; justify-items: stretch; align-items: stretch; background-color: grey;}.content { height: 100%; display: flex; flex-direction: column; justify-items: stretch; align-items: stretch; background-color: blue;}.content>div { height: 100%; min-height: 1rem; background-color: gold;}.footer { height: 2rem; min-height: 2rem; flex: 0 0 1; background-color: green;}<body><div class="content"><div></div><div></div><div></div></div><div class="footer center"></div></body>* { margin: 0.5rem;}html, body { width: 100%; height: min-content; margin: 0; padding: 0;}body { display: flex; flex-direction: column; flex-wrap: nowrap; justify-items: stretch; align-items: stretch; background-color: grey;}.content { height: min-content; display: flex; flex-direction: column; justify-items: stretch; align-items: stretch; background-color: blue;}.content > div { height: 6rem; min-height: 1rem; background-color: gold;}.footer { height: 2rem; min-height: 2rem; flex: 0 0 1; background-color: green;}<body><div class="content"><div></div><div></div><div></div></div><div class="footer"></div></body>