如何在高度未知的div上设置溢出滚动

Question

我有以下设置:

.page {
width: 360px;
height: 704px;
border: 1px solid red;
}
header {
height: 10%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
}
main {
height: 90%;
background-color: beige;
width: 100%;

display: flex;
flex-flow: column;
}
.container-dynamic {
width: 100%;
height: 400px;
border: 1px dashed grey;

display: flex;
align-items: center;
justify-content: center;

flex: 0 0 auto;
}
p {
text-aling: center;
}
.container-fill {
width: 80%;

border: 1px dashed black;

height: auto;

flex: 1 1 auto;


}
.c {
width: 100%;
background-color: lightgreen;
padding: 10px;

max-height: 100%;

overflow: scroll;

flex: 1 1 auto;
}
.b {
width: 80%;
height: 200vh;
background-color: lightblue;
}

<div class="page">
<header>
HALLO
</header>
<main>
<div class="container-dynamic">
<p>This container has dynamic height</p>
</div>
<div class="container-fill">
<p>This container fills up the left space</p>
<div class="c">
<div class="b">
</div>
</div>
</div>
</main>
</div>

现在你可以看到，绿色区域比整个.page元素大得多。我想要实现的是使绿色区域填充页面的左侧空间。我用flex: 1 1 auto在.c上和display: flex, flex-flow: column在main元素上实现了这一点。除此之外，我需要绿色区域是可滚动的，当子元素(这里是浅蓝色的矩形.b)太大而无法容纳它而没有溢出时。但是将overflow: scroll设置在绿色元素上不会产生任何影响，并且会导致给出的代码示例。如果有人能告诉我如何实现我的目标，我将非常感激。

---

当然，这可以通过JavaScript计算剩余高度来实现，但我想知道是否有一个css-only方法。

Answer 1

.page {
width: 360px;
height: 704px;
border: 1px solid red;
}
header {
height: 10%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
}
main {
height: 90%;
background-color: beige;
width: 100%;

display: flex;
flex-flow: column;
}
.container-dynamic {
width: 100%;
height: 400px;
border: 1px dashed grey;

display: flex;
align-items: center;
justify-content: center;

flex: 0 0 auto;
}
p {
text-aling: center;
}
.container-fill {
width: 80%;

border: 1px dashed black;

height: 100%;

flex: 1 1 auto;


}
.c {
width: 100%;
background-color: lightgreen;
padding: 10px;

max-height: 100%;

overflow: scroll;

flex: 1 1 auto;
box-sizing: border-box;
}
.b {
width: 80%;
height: 200vh;
background-color: lightblue;
}
.scroll-elem-container {
flex-grow: 1;
overflow: hidden;
}

<div class="page">
<header>
HALLO
</header>
<main>
<div class="container-dynamic">
<p>This container has dynamic height</p>
</div>
<div class="scroll-elem-container">
<div class="container-fill">
<div class="c">
<div class="b">
</div>
</div>
</div>
</div>
</main>
</div>