I’m making a website layout made to look like the old Windows95 paint window, and I’ve come across an issue in making the canvas ‘window’ resizable. It works horizontally, but not vertically. The canvas of the won’t expand beyond the min-height I have assigned to it, and I can’t figure out how to make it work. Is it because the resize property is attached to the general paint window, and not the inner canvas div? In that case, would I need to attach the resizable class to the canvas, or is there a way around it? I would LOVE to have the inner div expand horizontally as it does vertically. The code I’m using is below.

#paintbox {
display: inline-block;
position: absolute;
min-width: 628px;
min-height: 446px;
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: 628px;
min-height: 446px;
}

.canvas {
display: block;
position: absolute;
min-width: 463px;
left: 60px;
min-height: 250px;
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: 3px;
box-shadow: inset 0 2px 0 0 black, inset 2px 0 0 0 black;
}

And I’m not sure what I could be doing wrong, unless it’s an issue of where I have the resizable property. Here’s a codepen link of the entire code.

I’ve tried resizing and adding different positions to any div I can think of, but nothing seems to give me the solution I want 🙁