How to set height of list to the height of smaller element on flex-box

Asked Mar 18 '22 at 20:39

Active Mar 18 '22 at 21:27

Viewed 18 times

i have a flex-box container (row), that contains an vertical list that is set to overflow: scroll, and another div that has flexible height, how to i set the height of the list to be equal to the height of the div, so that i can scroll, right now the list is just way bigger than the div

also i need do that with pure css

<div #id="container">
  <div id="list">
    <div></div>
    <div></div>
  </div>
  <div id="other-div">
</div>

asked Mar 18 '22 at 20:39

maia

Do you mean that the "other-div" can change its height at any time and when that happens the list should take exactly the new height of that "other-div" ? – Med Okl Mar 18 '22 at 20:55
@MedOkl yeah, exactly – maia Mar 18 '22 at 20:59
1

Well, in that case, I'm afraid you just can't do it with simple css. This is a dynamic behavior taht you're asking for, and css is only for formatting, presentation, and layout. To do this, you have to use Js. – Med Okl Mar 18 '22 at 21:03
I think this is possible to do – Zach Jensz Mar 18 '22 at 21:20
1

@MedOkl it's possible, check the duplicate – Temani Afif Mar 18 '22 at 21:22

How to set height of list to the height of smaller element on flex-box

0 Answers0