Scrollable div 占用剩余高度（Bootstrap 4 Flexbox 网格系统）

Question

在 Bootstrap 4 Alpha 3 中启用 flexbox 支持之前，我的代码运行良好：

但是，启用 flexbox 支持后，我无法使其工作。如果有办法使用Bootstrap 4 built-in Flexbox grid system features，那最好了！

html

<div class="container wrapper">
  <div class="row header">
      header
  </div>

  <div class="row content">
      content: fill remaining space and scroll<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>

  <div class="row footer">
      footer
  </div>
</div>

css

.wrapper {
  height: 20rem;
  display: flex;      /* if remove this, the style will be correct, but won't scroll */
  flex-flow: column;  /* if remove this, the style will be correct, but won't scroll */
}

.header {
  background: tomato;
}

.content {
  background: gold;
  overflow-y: scroll;
}

.footer {
  background: lightgreen;
}

Answer 1

你的 CSS 稍作改变将帮助你用 Bootstrap 4 和 flex 启用：默认情况下，在 Bootstrap 4 中，它将著名的 class .row 的默认属性更改为：

.row {
    display: flex;
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
    flex-wrap: wrap;
}

即为什么你的结构和以前不一样了，你需要做的就是把它的 CSS 改回原来的结构：

CSS

.wrapper {
  height: 20rem;
  display: flex;
  flex-flow: column;
}
.row {
    display: block;
    margin-right: -15px;
    margin-left: -15px;
}
.row:before, 
.row:after {
  content: " ";
  display: table;
}
.row:after {
  clear: both;
}

这是更新后的 JSFiddle

Answer 2

受@vivekkupadhyay 的启发，换一种方式，只需将 display: block; 添加到页眉和页脚即可。

jsfiddle

html

<div class="container wrapper">
  <div class="row header">
      header
  </div>

  <div class="row content">
      content: fill remaining space and scroll<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>

  <div class="row footer">
      footer
  </div>
</div>

css

.wrapper {
  height: 20rem;
  display: flex;
  flex-flow: column;
}

.header {
  background: tomato;
  display: block;
}

.content {
  background: gold;
  overflow-y: scroll;
}

.footer {
  background: lightgreen;
  display: block;
}

Scrollable div 占用剩余高度（Bootstrap 4 Flexbox 网格系统）

Scrollable div take up remaining height (Bootstrap 4 Flexbox grid system)

html

css

flexbox

twitter-bootstrap

bootstrap-4

CSS