How to get a parent div to resize its height - html

Question

I have a parent div that contains a child div. I want the parent div to resize automatically so the child is always inside the parent's borders. Right now the bottom of the child div is extending beyond the bottom of the parent because of relative positioning. How do I get the parent resize?
#parentDiv {
margin: 40px 0 0 40px;
background-color: #eae;
width: 1500px;
height: auto;
}
#childDiv {
position: relative;
max-width: 400px;
min-height: 200px;
background-color: #B9D7D9;
top: 20px;
left: 20px;
}
<div id="parentDiv">
<div id="childDiv">
</div>
</div>

Answer 1

Relative positioning moves the element visually so if you want to contain it within the parent you'll need another method to move the child element.
Margin would seem to be the most obvious choice
#parentDiv {
background-color: #eae;
width: 500px;
margin: 40px;
overflow: auto;
}
#childDiv {
position: relative;
max-width: 400px;
min-height: 200px;
background-color: #B9D7D9;
margin-top: 20px;
margin-left: 20px;
<div id="parentDiv">
<div id="childDiv"></div>
</div>

Answer 2

Got rid of the positioning of the childDiv.
Outlined the elements so you can see them clearly.
Since there's min and max dimensions, I put 100% height and width for explicit measurements.
body {
height: 100vh;
width: 100vw;
}
#parentDiv {
margin: 40px 0 0 40px;
background-color: #eae;
width: 1500px;
outline: 2px dashed blue;
}
#childDiv {
max-width: 400px;
width: 100%;
min-height: 200px;
height: 100%;
background-color: #B9D7D9;
outline: 2px solid red;
}
<div id="parentDiv">
<div id="childDiv">
</div>
</div>