Bootstrap 5 - 使用 flex-grow-1 class 使 div 可滚动

Question

I'm trying to make the indicated div below scrollable, but it always seems to extend the document size beyond screen space instead of creating a scrollbar. One solution is to set a fixed pixel height for the div, but I want to avoid this to ensure scalability between devices. Any ideas?

<div class="row no-gutters w-100 flex-grow-1">
  <div class="col-8">
    <div id="playarea" class="container-fluid border-top border-end h-100 px-0">
      <!-- Cards go here -->
    </div>
  </div>
  <div class="col-4">
    <div class="container-fluid border rounded-top w-100 h-100 d-flex flex-column">
      <div class="container my-3 d-flex mb-0">
        <h5 class="flex-grow-1">Side Content</h5>
      </div>
  
      <hr class="border mt-2 mb-3">
  
      <div class="container mb-3 d-flex">
        <!-- Non-scrollable search area -->
      </div>
  
      <div class="container flex-grow-1 overflow-auto">
        <!-- Scrollable content goes here -->
      </div>
  
      <div class="card mt-2 bg-light mb-3" id="info-panel">
        <div class="card-body">
          <!-- Non-scrollable info box -->
        </div>
      </div>
    </div>
  </div>
</div>

Many thanks in advance

Answer 1

Your question is a bit confusing because your .row has .flex-grow-1 which one would only add if you want .row to grow in available height of its parent, not in width. This would mean .row should always have a height and my solution can be simplified. So let me know if that's the case, because my answer assumes .row has no height.

My solution that requires no fixed height uses a container inside col-4 with absolute positioning:

  #overflow-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: inherit;
  }

This container will take up all available space inside col-4 and will grow or shrink with it. Now the element with overflow: scroll will work as you want.

The only drawback here is that if col-8 (or row ) has no content - and thus no height - the #overflow-container will also have no height and any content inside the .overflow-auto element will not be visible. So if col-8 can be empty, a min-height on col-4 s parent is needed.

The line padding: inherit is there to give the column its padding back; Bootstrap uses the selector row > * to give columns their padding.

I removed all unnecessary classes for this snippet to work for simplicity, but I added the sm breakpoint on the columns so they stack on mobile screen sizes. If you don't want this, you can simply remove the -sm part on the columns and the @media in the CSS. It's only there to show how it can be done.

 .col-sm-8 { background: lightyellow; }.col-sm-4 { background: lightgreen; } @media (min-width: 576px) { #overflow-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: inherit; } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> <div class="container-fluid"> <div class="row"> <div class="col-sm-8"> <p>This column should have enough content...</p> <br><br><br><br><br> <p>...So `Overflowing content` will have a height.</p> </div> <div class="col-sm-4 position-relative"> <div class="d-flex flex-column" id="overflow-container"> <div class=""> <h5>Aside Content</h5> </div> <div class=""> <p>Some content here.</p> </div> <div class="overflow-auto"> <p>Overflowing content.</p> <br><br><br><br><br><br><br><br><br> <p>Unless col-8 is long enough for me to fit.</p> </div> <div class=""> <p>Some content here.</p> </div> </div> </div> </div> </div>