如何限制div的大小调整比例，使其不能大于父div

Question

所以我得到了一个可调整大小的div，它位于父div中。问题是，我可以将childDiv的大小调整得比parentDiv大得多。如何限制大小调整？

.borderbox {
float: left;
height: 500px;
width: 50%;
background: white;
border: 1px solid black;
}
.movebox {
height: 100px;
width: 200px;
position: absolute;
overflow: auto;
resize: both;
display:flex;
background-color: orange;
}

<div class="borderbox">
<div class="movebox">
</div>
</div>

Answer 1

您可以将父元素设置为position: relative;，然后将100%的max-width和max-height应用于子元素。

.borderbox {
float: left;
height: 500px;
width: 50%;
background: white;
border: 1px solid black;
position: relative;
}
.movebox {
height: 100px;
width: 200px;
max-width: 100%;
max-height: 100%;
position: absolute;
overflow: auto;
resize: both;
display:flex;
background-color: orange;
}

<div class="borderbox">
<div class="movebox">
</div>
</div>

Answer 2

您可以在类movebox中删除position: absolute;

演示：

.borderbox {
float: left;
height: 500px;
width: 50%;
background: white;
border: 1px solid black;
}
.movebox {
height: 100px;
width: 200px;
overflow: auto;
resize: both;
display:flex;
background-color: orange;
max-width: 100%
}

<div class="borderbox">
<div class="movebox">
</div>
</div>