How to set height dynamically of a div content with overflow set as auto?

Question

There is a parent div, which has two child div. I want the parent div to have height 100% of the body, and each of the child div should have dynamic height from the content inside them, so I cannot set a specific height to either of them, and on top of that the second child div is suppose to have overflow with auto, and hence even the second child div should be inside of the body, without taking the space out of it.

This is the html of it -

<div class="homepage-parent">
   <div class="homepage-parent_child1"></div>
   <div class="homepage-parent_child2"></div>
</div>

And this is the css of it -

.homepage-parent {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.homepage-parent_child1 {
  width: 100%;
}

.homepage-parent_child2 {
  width: 100%;
  height: 100%;
  overflow: auto;
}

NOTE: I do not want the child2 div to go out of the parent div, and I do not want to use absolute positioning to do that, I just want to know if there's any other way than JavaScript to achieve this.

Answer 1

Do you mean something like this ? I can't really explain how though, cause I only know how to use tailwind, and I'm not really proficient with CSS. it should be something like this for css

.homepage-parent {
  min-height: 100%;
  height: 100vh;
  /* No need for flex, but you can use it */
  display: flex;
  flex-direction: column;
}

.homepage-parent_child1 {
  width: 100vh;
}

.homepage-parent_child2 {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: auto;
}