除非必須換行，否則如何使元素填充剩余空間

Question

我有兩個div 。 我試圖讓其中一個填充剩余的空間，直到它必須包裹。

 #resize { resize: both; display: inline-block; background: #0f0; width: 100px; height: 100px; overflow: hidden; } #div1 { display: inline-block; background: #f00; } #div2 { display: inline-block; background: #00f; }

 <div id="resize"> <div id="div1">div1</div> <div id="div2">div2 (remaining space)</div> </div>

我可以實現填充：

 #resize { resize: both; display: inline-block; background: #0f0; width: 100px; height: 100px; overflow: hidden; /*fill*/ display: flex } #div1 { display: inline-block; background: #f00; } #div2 { display: inline-block; background: #00f; /*fill*/ flex-grow: 1 }

 <div id="resize"> <div id="div1">div1</div> <div id="div2">div2 (remaining space)</div> </div>

但是當它們溢出時我不能讓div垂直換行

Answer 1

您是否允許使用彈性框，如果是，那么您可以在 CSS 下面使用以獲得所需的結果

#resize {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 ...removed other CSS for readability
}

#div2 {
 flex: 1;
 min-width: 151px; //fixed min-height to wrap at certain width
 ...removed other CSS for readability
}

 #resize { resize: both; display: flex; flex-wrap: wrap; align-items: baseline; background: #0f0; width: 100px; height: 100px; overflow: hidden; } #div1 { display: inline-block; background: #f00; } #div2 { flex: 1; min-width: 151px; display: inline-block; background: #00f; }

 <div id="resize"> <div id="div1">div1</div> <div id="div2">div2 (remaining space)</div> </div>