滚动的div占据剩余高度（Bootstrap 4 Flexbox网格系统）

Question

在启用Bootstrap 4 Alpha 3中的flexbox支持之前，我的代码可以正常工作：

工作的jsfiddle

然而，在启用flexbox支持后，我无法使其正常工作。如果使用Bootstrap 4内置的Flexbox网格系统功能的方法，那将是最好的！

不工作的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;      /* 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;
}

- Hongbo Miao

Answer 1

稍微调整一下你的 CSS，就可以在启用 flex 的情况下使用 Bootstrap 4 实现相同的效果： 在 Bootstrap 4 中，默认情况下会更改著名类 .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

- vivekkupadhyay

---

谢谢，但如果有一种不覆盖Bootstrap CSS的方法，那就太好了。 - Hongbo Miao

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>

样式表

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

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

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

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

- Hongbo Miao