How to make a scroll div height only as big as sibling div in row

Question

Is this possible with just css? There are two siblings elements. The 2nd element has height that is only big enough to fit its children (children may change over time). The 1st element should have the same height as the 2nd element. If its content is larger than its height then it should overflow with scroll.

The snippet below does not match this because the 1st element takes up as much height as it needs to fully display its contents.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  border-style: solid;
  border-width: 1px;
  border-color: #000;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: fit-content;
}

#first {
  background-color: #00F;
  overflow-y: scroll;
  height: 100%;
}

#second {
  background-color: #0F0;
  height: fit-content;
  width: 200px;
}

#block {
  height: 40px;
  width: 40px;
  margin: 5px;
  background-color: #F00;
}

<div id="container">
  <div id="first">
    <div id="block">
    </div>
    <div id="block">
    </div>
    <div id="block">
    </div>
  </div>
  <div id="second">
    <div id="block">
    </div>
    <div id="block">
    </div>
  </div>
</div>

score 4 · Accepted Answer · answered Aug 20 '20 at 22:40

You should wrap the #first with extra wrapper and apply the background color to it. And use height:0 min-height:100% trick on the #first

I also fixed your html mistake. An ID can only be used once per page. So I changed the #block as .block

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  border-style: solid;
  border-width: 1px;
  border-color: #000;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: fit-content;
}

.scroll-area {
  overflow-y:auto;
  background-color: #00F;
}

#first {
  min-height: 100%;
  height: 0;
}

#second {
  background-color: #0F0;
  /* height: fit-content; // unnecessary */
  width: 200px;
}

.block {
  height: 40px;
  width: 40px;
  margin: 5px;
  background-color: #F00;
}

<div id="container">
  <div class="scroll-area">
    <div id="first">
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
    </div>
  </div>
  <div id="second">
    <div class="block">
    </div>
    <div class="block">
    </div>
  </div>
</div>

How to make a scroll div height only as big as sibling div in row

1 Answers1