css - 固定定位的页脚，但也是 Flexbox 元素流的一部分

Question

我正在尝试使用 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 应该填充剩余的高度child A 中的空间，并且可以在 y 轴上滚动。

我尝试过类似的方法

.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 固定到了底部，但它不再是元素流的一部分，因此，main-section 在它下面延伸并且是无法溢出。

非常感谢任何帮助

Answer 1

我做了这个 fiddle 来演示解决方案:http://jsfiddle.net/aequalsb/mL5gtsep/

它利用绝对定位来适本地设置 top 和 bottom 属性，这样容器就可以在不依赖特定宽度和高度的情况下拉伸(stretch)到它们的极限。

尽管 CSS 最初使用 % 设置属性，但在 DOM 中，长度由浏览器计算，并可作为特定 px 长度提供给 javascript/jQuery——OP 然后可以使用它来执行鼠标拖动操作调整容器的大小。