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

gblwokeq 于 2023-01-06 发布在 Bootstrap

关注(0)|答案(1)|浏览(282)

我试图使下面的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>

先谢谢你了

css

来源：https://stackoverflow.com/questions/74983944/bootstrap-5-make-div-with-flex-grow-1-class-scrollable

1条答案

按热度按时间

r6hnlfcb1#

你的问题有点混乱，因为你的.row有.flex-grow-1，只有当你想让.row在其父节点的可用高度上增长，而不是在宽度上增长时，才会添加.flex-grow-1。这意味着.row应该总是有一个高度，我的解决方案可以简化。所以如果是这样的话，请告诉我，因为我的答案假设.row没有高度。
我的解决方案不需要 * 固定 * 高度，它在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-4的父元素上添加min-height。
行padding: inherit用于返回列的填充; Bootstrap使用选择器row > *为列提供填充。
为了简单起见，我删除了所有不必要的类，但是我在列上添加了sm断点，这样它们就可以在移动屏幕大小上堆叠。如果你不想这样做，你可以简单地删除列上的-sm部分和CSS中的@media。它只是为了展示如何完成它。
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-06

我来回答

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

1条答案

相关问题

热门标签

最新问答