I’m trying to create a grid with 100% height and the following appearance:
The second row should fill the remaining vertical space, even if contents of cells C & D are too short.
Furthermore, if the contents of row D are too large, then a vertical scrollbar should appear for that cell only, like this:
How can I do that? This is what I have (https://jsfiddle.net/z8742qdo/28/):
<body class="vh-100">
<div class="h-100 container-fluid">
<div class="row">
<div class="col-10 bg-warning">
A
</div>
<div class="col-2 bg-primary">
B
</div>
</div>
<div class="row">
<div class="col-2 bg-danger">
C
</div>
<div class="col-10 bg-success">
D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br>
with<br>scrollbars<br>only<br>
</div>
</div>
</div>
</body>
2
Answers
set
max-height
to cell D and setoverflow-y: auto
to show scrollbar only contents of cell D is large.For the layout, use flexbox with
.flex-column
on the.container-fluid
, then add.flex-grow-1
to the second.row
to make it grow to fill available space.For the overflow, you need
.overflow-auto
on the scrollable div and you will also need to add.overflow-hidden
to the immediate parent.row
.