限制flexbox项目的高度

Question

我有一个flexbox，其中有两个项目，方向为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>

我找到的最接近的帖子是这个，但答案似乎在我的情况下不起作用。

- wezten

---

无论出于什么原因，您不想在＃item-2中设置相同的固定高度吗？ - Dez

是的，这是一个重复内容，但我正在尝试找到链接。 - Paulie_D

@Dez 是的 - 实际上 item-1 的高度是自适应的，并且可以根据其宽度和内容而变化。 - wezten

另一个重复的问题：https://dev59.com/XZjga4cB1Zd3GeqPHDrR - Michael Benjamin

Answer 1

添加一个具有position: absolute属性的包装器。

现在，您可以将左侧最小高度设置为右侧最大高度的跟随者。

#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

---

对于我在Firefox 62上，min-height没有任何影响；它可以正常工作，将右侧元素的高度限制为左侧元素的自然高度。 - SpyderScript

@SpyderScript 这可能是情况，很可能是因为Flexbox正在逐渐弥补缺失的功能，而且一般来说，最麻烦的问题之一就是子元素如何获取父元素的高度。请注意，我这个回答已经有将近2年的时间了。 - Asons

@SpyderScript 另外，min-height并不像OP最初使用的height一样限制高度。 - Asons