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.
<code>* {
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;
}</code>
<code>* {
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;
}</code>
* {
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;
}<code><body>
<div class="content">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer center"></div>
</body></code>
<code><body>
<div class="content">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer center"></div>
</body></code>
<body>
<div class="content">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer center"></div>
</body><code>* {
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;
}</code>
<code>* {
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;
}</code>
* {
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;
}<code><body>
<div class="content">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer"></div>
</body></code>
<code><body>
<div class="content">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer"></div>
</body></code>
<body>
<div class="content">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer"></div>
</body>