javascript - Calculate the height value of DIV as a function of SCSS and use it as the height of another DIV

Question

The DIV height value must be calculated as a function of SCSS and used at a different DIV height.

I searched but couldn't find the SCSS function that calculates the height of another div using an internal variable.

I'm trying to create a chat window, and I hope that the input box for this chat is position: absolute and always at the bottom.

The problem is that the text you type increases the height of the chat entry box. This means that the exact height is not determined in the chat.

A problem was found that determines the height of the dark red chat content.

The chat history field could not be set to calc() because it is not a fixed height, resulting in an error similar to the one in the middle.

The last picture is what I want.

Can the SCSS function receive the height of the chat input box to determine the height of the chat content?

I would like to solve this problem with SCSS or CSS as much as possible, but if not, I can use pure JavaScript. (Not jQuery.)

<div class="parent1">
    <div class="chat-history">
       <p>abdcdaceasdfasdfddasfdefdafdadfsdfdasdfdsfasdfasdf</p>
    </div>
    <div class="chat-input"></div>
</div>

.parent1 {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.chat-history {
    width: 100%
} // I'd like to calculate the height of this.

.chat-input {
    display: flex;
    position: absolute;
    bottom: 0;
    min-width: 70px;
    max-height: 140px;
}

Answer 1

Please try this:

.parent1{display:flex;width:100%;height:50vh;position:relative;}