Hongbo Miao Hongbo Miao - 3 months ago 15
CSS Question

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

Before enabling flexbox support in Bootstrap 4 Alpha 3, my codes work well:

Working jsfiddle

However, after enabling flexbox support, I cannot make it work. If there is a way using Bootstrap 4 built-in Flexbox grid system features, that will be best!

Not working 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

A slight change in your CSS will help you achieve the same with Bootstrap 4 with flex enabled: By default in Bootstrap 4 it changes default properties of famous class .row to:

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

i.e. why your structure wasn't the same as it was before, all you need to do is to change its CSS back to the previous one as:

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;
}

Here's the updated JSFiddle