Geek Answers Handbook

The scrollable div takes up the remaining height (Bootstrap 4 Flexbox mesh grid)

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

Jsfiddle works

However, after enabling flexbox support, I cannot get it to work. If there is a way to use Bootstrap 4's built-in flexbox grid mesh functions , this would be best!

Jsfiddle does not work

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; }
+5
source share
2 answers

A small change in CSS will help you achieve the same result with Bootstrap 4 with flex support: By default in Bootstrap 4, it changes the default properties of the well-known .row class to:

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

i.e. why your structure was not the same as before, all you have to do is change its CSS to the previous one, like:

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 updated JSFiddle

0
source

Inspired by @vivekkupadhyay, in another way, just add display: block; in the header and footer.

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

More articles:


All Articles