可滚动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;
}

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，如下所示：

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