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

Question

So I got a resizable Div which lays in the parent Div. The Problem is, I can resize the childDiv much larger than the parentDiv. How can i limit the resizing?

 .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

You can set the parent to position: relative; and then apply a max-width and max-height of 100% to your child element.

 .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

You can remove position: absolute; in class movebox

Demo:

 .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>