How do I make an element fill remaining space unless it must wrap-CodePudding

I have two divs. I am trying to make one of them fill the remaining space, until it must wrap.

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

I can achieve the fill:

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

But I can't get the divs to wrap vertically when they overflow

CodePudding user response：

Are you allowed to use flex box, if yes then you can use below CSS to get the desired result

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