如何使元素填充剩余空间，除非它必须换行

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

是否允许使用flex box，如果允许，则可以使用下面的CSS来获得所需的结果

#resize {
display: flex;
flex-wrap: wrap;
align-items: baseline;
...removed other CSS for readability
}
#div2 {
flex: 1;
min-width: 151px; //fixed min-width 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>