14

I have a flexbox with 2 items, direction=row. The text content of the second item is very long. I would like the second item to be as high as the first item, and have a scrollbar. Is this possible?

#wrap { display: flex; }
#item-1 { height: 100px; background: orange; flex: 1; }
#item-2 { overflow: scroll; flex: 1; }
<div id='wrap'>
  <div id='item-1'></div>
  <div id='item-2'>  
I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br>
  </div>
</div>

The closest post I've found is this one, but the answer doesn't seem to work in my case.

Community
  • 1
  • 1
wezten
  • 2,126
  • 3
  • 25
  • 48

1 Answers1

27

Add a wrapper having position: absolute

Now, you can set a min-height to the left most, which the height of the right most will follow.

#wrap { display: flex; }
#item-1 { min-height: 100px; background: orange; flex: 1; }
#item-2 { position: relative; flex: 1; }
#item-wrap { 
  position: absolute; 
  left: 0; top: 0; 
  right: 0; bottom: 0;
  overflow: auto; 
}
<div id='wrap'>
  <div id='item-1'>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
  </div>
  <div id='item-2'>  
  <div id='item-wrap'>  
I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br> I would like this text to have a scrollbar, and thus not take up more height than the orange box.<br>
  </div>
 </div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • For me on Firefox 62, the min-height makes no difference; it works without, limiting the height of the right element to the natural height of the left. – swinn Aug 21 '18 at 14:20
  • @SpyderScript That might be the case, and most likely because Flexbox is starting to catch up with missing features, and one of the most troublesome things, in general, have been how a child should picking up a parents height. Do note, this answer of mine is almost 2 years old. – Asons Aug 21 '18 at 14:26
  • @SpyderScript Also, `min-height` does **not** limit the height in the same way as `height` does, which the OP initially used. – Asons Aug 21 '18 at 14:47