css 强制< div>元素扩展并填充剩余的屏幕空间，但决不能扩展到屏幕视区之外

我想调整一个div元素的大小来填充所有剩余的可用空间。但是，如果/当它的内容超过剩余空间时，任何溢出都应该包含在其中，而不需要调整或改变它的高度。该元素应该有一个固定高度来填充剩余空间。
我的例子是使用Bootstrap。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row mx-0 flex-grow-1">
    <div class="d-flex col-4 flex-column h-100 border border-dark">
        <!--This column should expand down with its parent but never be able to expand off the screen-->
        <div class="row py-2">
            <div class="col">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Friends</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Friend Requests</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row flex-grow-1 overflow-auto">
            <div class="col flex-column">
                <!--If this list takes up more space than it's parents, it should overflow scroll without changing its height -->
                <ul class="list-group-flush" style="padding: 0;">
                    <li class="list-group-item">
                        <h3 class="col lead">Friend</h3>
                    </li>
                    <li class="list-group-item">
                        <h3 class="col lead">Friend</h3>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--Chat-->
    <div class="col-8 flex-column h-100 border-top border-end border-bottom border-dark">

    </div>
</div>

在这个图像中，上面的代码呈现，红色框是上面的代码影响的屏幕区域。长度"x"不应该小于或大于屏幕高度减去屏幕上所有其他元素的组合高度。
对于给定的代码，当列表扩展并到达包含元素的底部时，它将强制其父元素增长（因为它具有flex-grow-1）。

正如您所看到的，这将产生将页脚"推"出屏幕的效果，允许用户向下滚动以查看它。我用X标记了不需要的滚动条和超出视口的内容。
我希望元素大小保持不变，列表应该在其父列中滚动。
通过将最大高度设置为520px，我几乎可以达到预期效果：<div class="row mx-0 flex-grow-1" style="max-height: 520px;">这给了我一个很好的想法，我想实现什么。

最大高度硬编码：如您所见，页面的y维是静态的，列z是滚动的。
然而，我希望能找到一个React灵敏的解决方案，无论屏幕高度。
我的第一个想法是将它的高度设置为视口的高度，但如果我这样做了，它仍然允许滚动关闭，因为它是从视口的顶部偏移。
我还尝试了max-height:100%，但这又有一个问题，即列的最大高度变成了其父元素的高度，而父元素的高度偏移了一行。
有没有办法计算剩余高度并将最大高度设置为该值？

更新

在尝试了@RokoC. Buljan提供的解决方案很多小时之后，我仍然没有找到更接近的解决方案。以下是我所得到的。下面的两列应该彼此独立滚动。
所有元素的总高度应始终等于屏幕高度。
x一个一个一个一个x一个一个二个x

如果我没猜错的话，您所需要做的就是flex所需的项目，不要忘记将overflow: auto;设置为您想要独立滚动的项目：

* { margin: 0; box-sizing: border-box; }

body {
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
}

.flex {
  flex: 1;
  overflow: auto;
}

.row {
  display: flex;
  flex-flow: row nowrap;
}

.cell-3  { flex-basis: 25%; }
.cell-9  { flex-basis: 75%; }

<header class="row" style="background: #bf0">
  HEADER<br>
  WELCOME!
</header>

<main class="row flex">
  <section class="cell-3 flex" style="background: #0bf">
    <p style="height: 200vh">Some paragraph to force scrollbars...</p>End.
  </section>
  <section class="cell-9 flex" style="background: #f0b">
    <p style="height: 300vh">Some even taller paragraph as well...</p>End.
  </section>
</main>

<!-- PS avoid inline `style`. The above is just for demo -->

基本上是这个答案的延伸Flex max height content with dynamic header and footer

css 强制< div>元素扩展并填充剩余的屏幕空间，但决不能扩展到屏幕视区之外

更新

1条答案

相关问题

热门标签

最新问答