柔性盒项目的极限高度

Question

我有一个柔性盒带有2个项目，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>

最近的文章中，我已经找到is this one，但答案似乎并不在我的情况下工作。

Answer 1

添加有position: absolute

的包装现在，你可以设置一个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>