scroll - 如何使 flex div 可滚动

Question

假设我有 3 个这样的 DIV：

<div id="a">
    <div id="b">
        .....
    </div>
    <div id="c">
        .....
        a lot of elements
        .....
    </div>
</div>

样式已定义

#a { 
   position: absolute; 
   right: 100px; 
   width: 100px; 
   top: 0; 
   bottom: 0; 
   display: flex;
   flex-direction: column;
}

#b {

}

#c {
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
}

我不知道 DIV B 的高度，但我希望 DIV C 滚动它的内容，以防它不适合 DIV a。可能这张照片有帮助：

当我如上所述定义它时，DIV C 是“veeeery”高（超出 DIV a 的底部）并且它不会滚动其内容。有没有CSS方法，如何解决这个问题？

标签： scrollelement

Answer 1

最后我找到了解决方案——DIV C需要风格

flex: 1 100%;