限制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)是頂部和底部

元素的高度。