2016-11-03 7 views
2

フレックスボックスには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を見つけましたが、答えは私の場合で動作するようには思えません。

+0

あなたが '#アイテム-2 'に同じ固定の高さを設定したくない理由? – Dez

+0

はい、これは重複していますが、リンクを見つけようとしています。 –

+0

@Dezはい - 実際には、 'item-1'の高さは反応し、幅と内容に応じて変化します。 – wezten

答えて

6

今すぐ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>