I’m working on creating a website layout based off the Windows95 paint window, and I want to know if there’s a way for me to expand an inner div while keeping the outer div’s ratio the same. I have an outer ‘window’ (the main div that everything is contained in), a title bar, tab, palette, and bottom part that I want to stay where the are, while the inner ‘canvas’ expands as this is where the main page content will go. I have no problem with the top and left side of the page as the top expands fine and the left doesn’t need to move, but the bottom part and width of the inner canvas aren’t moving the way I want them to. Essentially, I want the bottom div to be ‘locked’ to the very bottom of the box while the canvas expands as the window is resizable. I have a codepen here with my code, so I hope you can see what I mean. I’ve also included the parts that I think are the problem below. (If I should show my code some other way, please tell me! I’m still quite new to asking questions here and do find this site a bit confusing. I also can’t seem to find out how to do the code snippets on a lot of questions here?)

#paintbox {
display: inline-block;
position: absolute;
max-width: 900px;
max-height: 600px;
border-right: grey 1px solid;
outline: white 1px solid;
outline-style: outset;
outline-offset: -2px;
border-right: 1px black solid;
border-top: 1px #dedfde solid;
border-left: 1px #dedfde solid;
border-bottom: 1px black solid;
background-color: #bdbebd;
z-index: 9;
top:  10px;
left: 0;
}
.resizable {
overflow: hidden;
resize: both;
min-width: 750px;
min-height: 517px;
}

.canvas {
display: block;
position: relative;
min-width: 600px;
left: 4px;
max-height: 400px;
outline: black 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px #7b7b7b solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px #7b7b7b solid;
background-color: white;
color: black;
margin-right: 7px;
overflow: hidden;
box-shadow: inset 0 2px 0 0 black, inset 2px 0 0 0 black;
}
.canvastext {
left: 0;
top: 0;
padding-left: 5px;
padding-bottom: 25px;
padding-right: 20px;
margin-top: 4px;
min-width: 600px;
max-height: 400px;
font-family: "w95a";
font-size: 1.5em;
overflow: scroll;
text-align: justify;
}

.palettearea {
display: inline-block;
position: relative;
width: 257px;
height: 62px;
left: 4px;
bottom: 0;
border-right: #bdbebd 1px solid;
}

I’ve attempted various displays and different widths (both min- and max-) to every div I can think of and nothing does what I want it to do 🙁 I’m really coming to the end of my very limited coding knowledge and don’t know what I’m doing wrong. I don’t think a parent div is causing problems as I’ve been through and gotten rid of any min- or max- heights that I thought could be causing issues, but I suppose it could be something very simple. Or is there simply not a way to do what I’m intending to do?