flex child переполняет родительскую высоту даже при максимальной высоте и высоте 100%

Question

я могу это исправить, установив body, html на 100%, но я действительно хочу понять, почему это поведение, когда я делаю неустановленную позицию, остается прежним

    <section id="section1-dca">
    <div class="flex">
      <div class="images">
        <img src="/images/dca/section1_1.jpg" alt="" class="pic-1">
        <img src="/images/dca/section1_2.jpg" alt="" class="pic-2 same">
        <img src="images/dca/section1_3.jpg" alt="" class="pic-3 same">
      </div>
      <div class="words">
        <h1>About Contemporary program</h1>
        <h2>Sociable on carriage my position wedings raillery consider. Peculiar trifling Absolute and wandered
          vicinity property yet</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
          et dolore magna aliquyam erat, sed diam voluptua. At vero eos et</p>
        <button class="btn">CONTACT US NOW!</button>
      </div>
    </div>
  </section>

css это так, но когда я даю рост телу, html рост 100% и родители 100%, это исправляет это, но в странном поведении, и я хочу понять это

#section1-dca{
background: #f0f0f0;
padding: 5rem 9rem;
}
.flex{
margin:0;
display:flex;
}
.images{
flex: 1 0 57%;
padding: 2rem;
position:relative;
}
.words{
padding-right: 1rem;
padding-top: 7rem;
flex:1 0  48.5%;
}
.pic-1{
width: 607px;
max-width: 65.7%;
max-height: 650px;
}
pic-2-1{
position: absolute;
border: 15px #fff solid;
top: 340px;
max-width: 59.5%;
max-height: 451px;
z-index: 2;
left: 36.43%;
}
.pic-2-2{
position: absolute;
border: 15px #fff solid;
max-width: 61.3%;
max-height: 475px;
top: 500px;
z-index: 3;
left: 8.75%;
}