限制flexbox项目的高度

Question

我有一个带有2个项目的flexbox,direction = row.第二项的文本内容很长.我希望第二项与第一项一样高,并有一个滚动条.这可能吗？

#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>

我发现的最近的帖子是这个,但答案在我的情况下似乎不起作用.

Answer 1

添加一个包装 position: absolute

现在,您可以将a设置min-height为最左侧,最右侧的高度将遵循.

#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>