フレックスボックスアイテムの限界高さ

Question

フレックスボックスには2つのアイテム、direction = rowがあります。 2番目の項目のテキスト内容は非常に長いです。 2番目の項目は最初の項目と同じくらい高く、スクロールバーが必要です。これは可能ですか？

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