Two scrollable containers with max-height

by slym12

HTML

<div class="parent">
  <div class="child1">
    <p>shit</p>
    <p>shit</p>
    <p>shit</p>
    <p>shit</p>
    <p>shit</p>
    <p>shit</p>

  </div>
  <div class="child2">
    <div class="child2_header">

      <b>header</b>

    </div>
    <div class="child2_content">
      <p>more shit</p>
      <p>more shit</p>
      <p>more shit</p>
      <p>more shit</p>
      <p>more shit</p>
      <p>more shit</p>

    </div>
  </div>
</div>

CSS

.parent {
  height: 70vh;
  width: 50vw;
  background-color: skyblue;
  display: flex;
  flex-direction: column;
}

.child1 {
  background-color: pink;
  /*   flex: 1; */
  max-height: 50%;
  overflow-y: auto;
  flex-shrink: 0;

}

.child2 {
  background-color: green;
  /* flex: 1 0 50%; */
  display: flex;
  flex-direction: column;
  flex: 1;
}

.child2_header {
  border: solid;
}

.child2_content {
  overflow-y: auto;
}