Scrolling divs in Bootstrap with 100% height

The scrolling in my Bootstrap Perl tutorial decided to stop working across all browsers without any code changes. After some head-scratching I tracked it down to a CSS height inheritance problem that trips up pretty much everyone working with Bootstrap at some point.

The problem

I had a scrollable panel set up like this:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 right-panel">
      <div class="scrollable">
        <!-- content -->
      </div>
    </div>
  </div>
</div>

.scrollable {
    overflow-y: scroll;
    height: 100%;
}

.right-panel {
    background-color: #f8f8f8;
}

overflow-y: scroll with height: 100% — looks right. Doesn't work.

Why it breaks

height: 100% is relative to the parent element's computed height. If that parent has no explicit height set, height: 100% resolves to nothing. CSS height inheritance doesn't work the same way percentage widths do — a percentage height only works when every ancestor up to a fixed reference point has an explicit height declared.

Bootstrap's .container-fluid, .row, and column classes don't set an explicit height by default. They size themselves to fit their content. So the chain is broken and height: 100% on your scrollable div ends up meaning "100% of nothing."

The fix

Set explicit heights on every ancestor in the chain:

html, body {
    height: 100%;
}

.container-fluid,
.row,
.right-panel {
    height: 100%;
}

.scrollable {
    overflow-y: scroll;
    height: 100%;
}

Bootstrap 4/5 alternative: flexbox

If you're on Bootstrap 4 or 5 you can use the flexbox utility classes instead and avoid the height chain problem entirely:

<div class="container-fluid d-flex flex-column" style="height: 100vh;">
  <div class="row flex-grow-1 overflow-hidden">
    <div class="col-md-8 right-panel h-100 overflow-y-auto">
      <!-- content scrolls here -->
    </div>
  </div>
</div>

/* Bootstrap 5.3+ includes overflow-y-auto as a utility class.
   For older versions add it yourself: */
.overflow-y-auto {
    overflow-y: auto;
}

vh units and flex-grow are much easier to reason about than percentage heights through a chain of unsized parents. Use 100vh on the outermost container and let flex handle the rest.

Tell your friends...