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

Question

我正在尝试使指示的 div 下面可滚动，但它似乎总是将文档大小扩展到屏幕空间之外，而不是创建滚动条。一种解决方案是为 div 设置固定的像素高度，但我想避免这种情况以确保设备之间的可伸缩性。有任何想法吗？

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

提前谢谢了

Answer 1

您的问题有点令人困惑，因为您的 .row 有 .flex-grow-1 如果您希望 .row 在其父级的可用高度而不是宽度上增长，则只会添加哪个。这意味着 .row 应该总是有一个高度，我的解决方案可以简化。如果是这种情况，请告诉我，因为我的回答假设.row 没有身高。

我的解决方案不需要固定的height 在col-4 中使用一个绝对定位的容器：

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

此容器将占用col-4 内的所有可用空间，并随之增大或缩小。现在带有overflow: scroll 的元素将按照您的意愿工作。

这里唯一的缺点是，如果col-8（或row）没有内容——因此没有高度——#overflow-container 也将没有高度，.overflow-auto 元素内的任何内容都将不可见。因此，如果 col-8 可以为空，则需要 col-4s parent 上的 min-height。

padding: inherit 行是为了让该列返回填充； Bootstrap 使用选择器row > * 为列提供填充。

为了简单起见，我删除了这个 sn-p 的所有不必要的类，但我在列上添加了 sm 断点，以便它们在移动屏幕尺寸上堆叠。如果你不想要这个，你可以简单地删除列上的 -sm 部分和 CSS 中的 @media 。它只是为了展示它是如何完成的。

.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>