How to make div height same as sibling div's height?

Question

I'm looking for a way to make #items div be the same height as #details div and I can't seem to be able to do this with CSS, therefore seeking for SO help.

There are also few nuances:

#details height can vary depending on the content but will have a minimum height (e.g. 400px)
#items can have 1 to N items, therefore scroll bar should hide if not needed (overflow-y: auto)

`#items` height should never go higher than `#details` and if there are more items than it can fit then the scrollbar should show up — BukeMan, Apr 19 '21 at 07:11

score 0 · Answer 1 · answered Apr 18 '21 at 18:13

0

try flex like that:

.container {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

#details {
   min-height: 400px;
}

note: container is parent of #items and #details

answered Apr 18 '21 at 18:13

AhmadKZX

293
1
11

thank you, this does the job (partly), but when there are more items then the height of #items becomes higher than #details div and the scrollbar doesn't show up. I've created a jsfiddle: https://jsfiddle.net/BukeMan/2trjv0c7/40/ – BukeMan Apr 21 '21 at 13:11

score 0 · Answer 2 · answered Apr 18 '21 at 18:14

this can easily be achieved using flex,

.row {
    display: flex
}

#items {
    background: red;
    width: 20%;
}

#details {
    background: blue;
    width: 80%;
}

<div class="row">
  <div id="items">words</div>
  <div id="details">words wordswords words wordswordswords wordswordswords wordswordswords wordswordswords wordswordswords wordswordswords wordswordswords wordswordswords wordswords words wordswords words wordswords</div>
</div>

How to make div height same as sibling div's height?

2 Answers2