Solution 1 :

SCSS can’t calculate the height, you’ll need Javascript for that.
The only thing that can somehow use heights that are not set in advance is flexbox. But if your boxes are not next to each other it won’t be useful.

You could create a javascript that creates a CSS variable based on the height of the window.

:root {
    --my-variable-name: #999999;
    .setProperty('--my-variable-name', HEIGHT);

Solution 2 :

Please try this:


Problem :

Error image and direction of purpose

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">
    <div class="chat-input"></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;


Comment posted by evolutionxbox

SCSS compiles before the code is run. It can’t calculate any height at runtime

Comment posted by eujin

Thank you for letting me know that I can’t. I should search for a way to do it with JavaScript.

Comment posted by

I would learn more css first. The way you’ve used flex box and percentage sizes makes me think that getting a more solid understanding of layout in css is needed. Check

Comment posted by eujin

As the number of input windows increases, the height of the chat history needs to be reduced, so the vh unit is unlikely to be available.