css - 如何使 flex 元素填充另一个相邻 flex 元素下的空白空间(包装)

Question

我想让一个 flex 元素在另一个较短的相邻 flex 元素下拉伸(stretch)，以便它填充任何空白。

在下面的代码笔中，“第一项”(绿色背景)应填充第二项(粉红色背景)下方的空间。

这是代码笔: https://codepen.io/anon/pen/bKaygK

代码如下:

html

<div class='wrap'>
  <div class='first-item'>
    <div>some text</div>
    <div>some more text</div>
    <div>some more text again</div>
  </div>
  <div class='second-item'>some box</div>
</div>

CSS

.wrap {
  display: flex;
  /*flex-wrap: wrap; not working*/
}

.first-item {
  background: lightgreen;
}

.second-item {
  align-self: baseline;
  background: pink; 
}

Answer 1

我认为最好依靠旧的 float 技术来实现这一点:

.wrap {
  display: inline-block;
}

.first-item {
  background: lightgreen;
}

.second-item {
  background: pink; 
  float:right;
}

<div class='wrap'>
  
  <div class='second-item'>some box</div>
  <div class='first-item'>
    <div>some text</div>
    <div>some more text</div>
    <div>some more text again</div>
  </div>
</div>