Set max-height to child by another child

October 25, 2022

I have wrapper container and two child element in it. One of them (a little one) has a dynamic height (user can change it) and i want to make another child to have the same height with overflow if it’s need. I tried to use max-height etc but still can’t do this

.container {
  display: flex;
  align-items: flex-start;
}

.child {
  max-width: 300px;
  padding: 10px;
}

.child1 {
  background: red;
  overflow-y: auto;
}

.child2 {
  background: green;
}

<div class="container">
  <div class="child child1">
    Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem
  </div>
  <div class="child child2">
    Lorem lorem Lorem lorem Lorem
  </div>
</div>

And i can not set min or max height to the parent

>Solution :

I’ve tried using position.

.container {
  display: flex;
}

.child {
  max-width: 300px;
  padding: 10px;
  width: 100%;
}

.child1 {
  background: red;
  overflow-y: auto;
  position: relative;
}

.child2 {
  background: green;
}

.should-scroll {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}

<div class="container">
  <div class="child child1">
  <div class="should-scroll">
   Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem
    Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem
     Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem</div>
   
  </div>
  <div class="child child2">
    Lorem lorem Lorem lorem Lorem Lorem lorem Lorem lorem Lorem loreLorem lorem Lorem lorem Lorem lore
  </div>
</div>