我正在使用Flexbox，但是遇到了以下文档结构的问题
$我希望<div class="parent">
<div class="child A">
<div class="top-section"></div>
<ul class="main-section">
<li></li>
...
</ul>
</div>
<div class="child B">
</div>
</div>
始终固定在屏幕底部，并child B填充child A上方的剩余空格。
在child B内，child A应始终位于顶部，其中top-section应填充main-section中的剩余空间，并且可以在y上滚动轴。
我尝试了一些
的内容child A虽然它正确地将.parent {
display: flex;
flex-direction: column;
align-items: flex-end;
min-height: 100%;
}
.childA {
flex: 4;
width: 100%;
}
.childB {
position : absolute;
bottom : 0;
min-height : 250px;
max-height : 20%;
width : 100%;
}
.main-section {
overflow-y : scroll;
}
修复到底部，但它不再是元素流的一部分，因此child B在其下方延伸并且无法溢出。
非常感谢任何帮助
答案 0 :(得分：1)
我这个小提琴演示了一个解决方案：http://jsfiddle.net/aequalsb/mL5gtsep/
它利用绝对定位来适当地设置top和bottom属性，以便容器能够在不依赖于特定宽度和高度的情况下伸展到极限。
即使CSS最初使用％设置属性，在DOM中长度由浏览器计算，并且可用于javascript / jQuery作为特定的px长度 - 然后OP可以用来执行鼠标拖动动作调整容器的大小。