限制div高度的项目实施方法

Question

我有一个三列布局，其中中间列的部分高度有问题。 一般来说，它是一个聊天应用程序。 类名是： 用于包含这三列的容器（我决定使用这样的网格来使列的高度相等）：

display: grid;
    grid-template-columns: 360px auto 300px;
    grid-auto-rows: 1fr;

左列和右列不太重要，但必须说明的是左列显示用户列表；列表的长度可能会变化（可以筛选用户）。右列具有静态内容（从大小的意义上说）；

中间列：

position: relative;

在这个中间列中，我有3个div，其中第二个是个头疼的问题

顶部div（高度是固定的）；

height: calc(
            var(--users-search-height) + (var(--users-search-wrapper-height) - var(--users-search-height)) / 2
        );

底部div（高度也是固定的）

height: var(--users-search-wrapper-height);
       
        bottom: 0;

当初始渲染时，通常左列的内容最高，底部div与其内容在视觉上对齐。当筛选用户时，中间列的底部div与右列的底部部分在视觉上对齐。这是完全正常的。 问题出现在聊天消息出现在中间列的中间div中时。只要这些消息很少，这不是一个问题，但很快中间div变得很大并且突出。因此，中间列的高度变高，底部div越来越低，这破坏了布局。我希望中间列的中间div在达到特定高度时获得自己的滚动条，并且不超过该高度，但这似乎非常复杂。

现在，中间div的样式如下：

max-height: calc(
            100% - var(--users-search-wrapper-height) -
                (var(--users-search-height) + (var(--users-search-wrapper-height) - var(--users-search-height)) / 2)
        );

        height: as above;

        overflow-y: scroll;

但它不起作用，内容的高度随着新消息的增加而增加（尽管滚动条是激活的，并且一些内容在滚动条的“后面”）。我怀疑这与列的容器没有固定的像素高度有关。但它不可以。我还尝试过将中间列样式设置为flex或grid，但效果都一样。也许可以用JS解决，但我更希望有严格的CSS解决方案。你有什么想法吗？

Answer 1

给具有大尺寸的

元素设置overflow-y: scroll是无用的。这个属性(overflow)假设高度比实际要低。所以要修复你的代码，你需要用以下属性将那个

元素包装起来，比如：<div class="wrap">...<div>：

.wrap {
 height: calc(100vh - var(--top-div-height) - var(--bottom-div-height));
 overflow-y: scroll;
}

其中var(--top-div-height)和var(--bottom-div-height)是顶部和底部

元素的高度。