Siblings same height and deep overflow

Question

I would like to know if it is possible to make an overflow to not go over the parent height :

Here is my HTML :

.list {
  display: flex;
  border: solid 5px grey;
}

.rectangle {
  padding: 8 px;
  border: solid 2 px #898989;
  border-radius: 5px;
  margin-bottom: 5px;
  background-color: black;
  border-radius: 15px;
  margin-right: 5px;
}

.header {
  color: white;
  border: solid 5px grey;
}

.body {
  background-color: darkred;
  height: 100%;
  overflow: auto;
}

.object {
  width: 150px;
  height: 100px;
}

<div class="list">
  <div class="g1">
    <div class="rectangle">
      <div class="object"></div>
    </div>
    <div class="rectangle">
      <div class="object"></div>
    </div>
  </div>
  <div class="g2">
    <div class="rectangle">
      <div class="object"></div>
    </div>
    <div class="rectangle">
      <div class="header">some text!</div>
      <div class="body">
        <div class="line">1</div>
        <div class="line">2</div>
        <div class="line">3</div>
        <div class="line">4</div>
        <div class="line">5</div>
        <div class="line">6</div>
      </div>
    </div>
  </div>
</div>

As you see, the list is going out of the sibling height. Is it possible to force the div to be as the same height as its siblings?

I already tried to give all tags a height but I don't feel like this is a good way to go since it would be dynamic content

Siblings same height and deep overflow

0 Answers0