Can't stretch a box height when the text overflows its width and creates a new line-CodePudding

I'm creating a simple calculator, but I'm having problems with the screen text.
If I enter a number so big that it does not fit in the screen, it creates a new line, however it does not stretch the calculator screen height, hence there is no space left to write the solution of the calculation on the screen.

The screen is divided in 2 parts, the upper part is where I write the calculation that is being inputted by the user, the lower part is where I write the result of the computation.

I won't provide you the whole snippet of code because it is too long, however i'll just write down here what happens on the screen.

HTML

<div id="screen">
    <div id="upper"></div>
    <div id="lower"></div>
</div>

CSS

#screen{
    height:94px;
    width:350px;
    margin-bottom: 20px;
    margin-top: 20px;

    border-radius: 5px;
    background-color: rgb(235, 255, 237);
    font-size: 30px;
    color: rgb(92, 91, 91);
    padding:5px;

    word-wrap: break-word;
    word-break: break-all;

}

#upper{
    text-align: right;

    width:350px;    
    height:40px;
    border: none;
}

#lower{
    text-align: right;
    
    width: 350px;
    height: 50px;
    border:none;
}

I'm not sure you guys need the JS, however what happens is that I just append some numbers to the screen upper node and when it gets the result I just write it in the lower part of the screen.

Hope somebody can help. If you need more details of the code let me know!

CodePudding user response：

In order for the div elements to be able to change height dynamically, their height property must not be set to an absolute value. Replacing it with min-height will produce the desired behaviour.