Как запретить прокручиваемому контейнеру растягивать родительский элемент в гибком макете ⇐ CSS

[Anonymous]

При создании гибких макетов я постоянно сталкиваюсь с проблемой: если у меня где-то есть прокручиваемый контейнер, его содержимое будет учитываться при расчете родительского размера и потенциально может привести к его выскакиванию из контейнера верхнего уровня.
Обычно, когда я настраиваю что-то для прокрутки, я хочу, чтобы оно всегда занимало любой доступный размер, а не требовало большего.
Я могу установить min-height: 0 (или ширину). Но просто сделать это в контейнере прокрутки недостаточно — мне нужно настроить ВСЕ. Если я не установлю его хотя бы на одном элементе на пути к корню, то он снова выскочит. Почему это происходит? Разве установки его в контейнере не должно быть достаточно, чтобы сообщить странице, что все в порядке, не занимая много места? Это не очень устойчиво, потому что, если я добавляю больше контейнеров, мой макет внезапно ломается во всех отношениях, пока я не найду, каким элементам не хватает минимальной ширины или минимальной высоты.
В этом примере контейнер a не имеет минимальной высоты, и все ломается.

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

.outer {
height: 400px;
display: flex;
flex-direction: column;
background-color: black;
padding: 10px;
width: 400px;
}
.a {
flex: 1 1;
display: flex;
flex-direction: column;
background-color: orange;
padding: 10px;
}
.b {
background-color: yellow;
padding: 10px;
height: 100px;
}
.c {
flex: 1 1;
min-height: 0;
overflow-y: auto;
background-color: red;
padding: 10px;
}
.d {
background-color: green;
height: 400px;
}

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

Есть ли какой-то атрибут, который мне не хватает, который предотвращает распространение размера вверх?
Существует также ядерный вариант использования абсолютного позиционирования, но он больше похож на хак.

Подробнее здесь: https://stackoverflow.com/questions/798 ... lex-layout