Flexbox full height column and overflow auto

Question

I want to have a fixed header and a fixed footer and the content between always use the full height, so I added a three rows flexbox layout.

The left content column must scroll (overflow-y:auto), if the content gets too long, but 100% height doesn't work. Is this possible without calculating the real height with something like 100vh minus header+footer?

<!doctype html>
<html lang="en" class="h-100">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    div[class^="col"] {
      padding-top: .75rem;
      padding-bottom: .75rem;
      background-color: rgba(112.520718, 44.062154, 249.437846, 0.1);
      border: 1px solid rgba(112.520718, 44.062154, 249.437846, 0.25);
    }
    
    .content {
      flex: 1;
    }
    
    .inner-content {
      overflow-y: auto;
      background-color: red;
    }
  </style>

</head>

<body class="d-flex flex-column h-100">
  <header>
    <div class="container">
      <nav class="navbar sticky-top">
        <a class="navbar-brand" href="#">Fixed navbar</a>
      </nav>
    </div>
  </header>
  <main class="content">
    <div class="container-fluid h-100">
      <div class="row h-100">
        <div class="col h-100 p-0">
          <div class="h-100 inner-content">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
            voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
        <div class="col">col</div>
      </div>
    </div>
  </main>
  <footer class="footer mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
  <script src="js/bootstrap.bundle.min.js"></script>
</body>

</html>

the fixed in my answer below is explained in the duplicate . — G-Cyrillus, Aug 24 '22 at 09:20

score 1 · Accepted Answer · answered Aug 24 '22 at 09:17

You need to add a min-height on content // See duplicate Why don't flex items shrink past content size?

<!doctype html>
<html lang="en" class="h-100">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    div[class^="col"] {
      padding-top: .75rem;
      padding-bottom: .75rem;
      background-color: rgba(112.520718, 44.062154, 249.437846, 0.1);
      border: 1px solid rgba(112.520718, 44.062154, 249.437846, 0.25);
    }
    
    .content {
      flex: 1;
      min-height:0;
    }
    
    .inner-content {
      overflow-y: auto;
      background-color: red;
    }
  </style>

</head>

<body class="d-flex flex-column h-100">
  <header>
    <div class="container">
      <nav class="navbar sticky-top">
        <a class="navbar-brand" href="#">Fixed navbar</a>
      </nav>
    </div>
  </header>
  <main class="content">
    <div class="container-fluid h-100">
      <div class="row h-100">
        <div class="col h-100 p-0">
          <div class="h-100 inner-content">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
            voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
        <div class="col">col</div>
      </div>
    </div>
  </main>
  <footer class="footer mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
  <script src="js/bootstrap.bundle.min.js"></script>
</body>

</html>

Flexbox full height column and overflow auto

1 Answers1