柔性盒項目的極限高度

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>