我有一个div，其中包含可变数量的元素，当内容溢出屏幕的剩余高度时，这些元素应该滚动，但是当内容增长到需要滚动时，div的高度将按照页面标题的精确高度展开.我想这与我的高度/弯曲设置有关，但我很难弄清楚如何防止它增长.
当内容不溢出时，Here是用于页面配置的笔，当内容溢出时，here是笔.
我应该更改什么来防止溢出的内容将div的高度扩展到其父的100%，而使用其父的100%减go header高度？
作为参考，标题大小的大小是由包含在其中的内容确定的，而不是像笔中的固定高度.
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
width: 100%;
height: 100px;
background-color: blue;
display: flex;
}
.column-container {
display: flex;
flex-direction: row;
background-color: red;
flex: 1 1 auto;
height: 100%;
}
.column {
display: flex;
flex-direction: column;
width: 50%;
}
#col-a {
background-color: green;
}
#col-b {
background-color: orange;
}
.spacer {
padding-top: 0px; // Note, change this to force overflow
}
.scroll-area {
display: flex;
flex-direction: column;
overflow: auto;
}<div class="container">
<div class="header">
<p>Header</p>
</div>
<div class="column-container">
<div class="column" id="col-a">
<p>Column A</p>
<div class="scroll-area">
<p>Scroll Area</p>
<p class="spacer">End</p>
</div>
</div>
<div class="column" id="col-b">
<p>Column B</p>
</div>
</div>
</div>