我正在制作一个网站布局，使其看起来像旧的 Windows95 绘画窗口，并且在使画布“窗口”可调整大小时遇到​​了一个问题。它可以水平工作，但不能垂直工作。c...

我正在制作一个网站布局，使其看起来像旧的 Windows95 绘画窗口，并且在使画布“窗口”可调整大小时遇到​​了一个问题。它可以水平工作，但不能垂直工作。画布不会超出我为其指定的最小高度，我不知道如何让它工作。是因为 resize 属性附加到一般绘画窗口，而不是内部画布 div 吗？在这种情况下，我是否需要将可调整大小的类附加到画布，或者有办法解决这个问题？我希望内部 div 水平扩展，就像垂直扩展一样。我使用的代码如下。

#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;
}

我不确定我可能做错了什么，除非是我的 resizable 属性的问题。这是 codepen codepen

我试过调整我能想到的任何 div 的大小和添加不同的位置，但似乎没有什么能给我想要的解决方案 :(

编辑：将高度更改为 %（即 50%）确实会使内部画布改变大小，因为它会调整为我指定的任何 %，但我仍然不明白为什么如果它的高度是像素指定的，它不会改变。宽度会改变，那么为什么高度不会改变？我可以看到外部绘画窗口是否发生了变化，而内部画布保持不变，但事实并非如此，这就是我感到困惑的地方。我只是错过了一些基本的东西吗？