Project implementation method to limit div height

Question

I have a three column layout where the middle column has some height issues. Generally speaking, it is a chat application. The class name is: For a container containing these three columns (I decided to use a grid like this to make the columns equal height):

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

The left and right columns are less important, but it must be noted that the left column displays the list of users; the length of the list may vary (users can be filtered). The right column has static content (in the sense of size);

Middle column:

position: relative;

In this middle column, I have 3 divs, the second of which is a headache

Top div (height is fixed);

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

Bottom div (height is also fixed)

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

When initially rendered, typically the left column's content is highest and the bottom div is visually aligned with its content. When filtering users, the bottom div of the middle column is visually aligned with the bottom section of the right column. This is completely normal. The problem occurs when the chat message appears in the middle div in the middle column. As long as these messages are few, this isn't a problem, but soon the middle div becomes very large and sticks out. So the middle column gets taller and the bottom div gets lower, which breaks the layout. I would like the middle div of the middle column to get its own scrollbar when it reaches a specific height and not exceed that height, but this seems very complicated.

Now, the style of the middle div is as follows:

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;

But it doesn't work, the height of the content increases with new messages (even though the scrollbar is active and some content is "behind" the scrollbar). I suspect this has something to do with the column's container not having a fixed pixel height. But it can't. I've also tried setting the middle column style to flex or grid, but it all works the same. Maybe it can be solved with JS, but I would prefer a strict CSS solution. Do you have any ideas?

Answer 1

Setting

overflow-y: scroll on elements with large sizes is useless. This property (overflow) assumes the height is lower than it actually is. So to fix your code, you need to wrap that

element with the following attribute, like: <div class="wrap">...<div>:

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

Where var(--top-div-height) and var(--bottom-div-height) are the heights of the top and bottom

elements.