Заполнить (растянуть) или прокрутить в зависимости от размера элемента ⇐ CSS

[Anonymous]

Можно ли добиться растягивающего поведения display: flex, когда min-content не будет заполнять страницу, но при этом будет иметь хорошее поведение при прокрутке, если min-content больше, чем размер страницы?
По сути, если второй фрагмент кода поведения не заполняет страницу, мне нужно поведение первого фрагмента кода.

Код: Выделить всё

* {
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;
}

Код: Выделить всё

Код: Выделить всё

* {
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;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/787 ... ement-size