html - 纯CSS解决方案可将3个元素的中间部分压低

好吧，我的情况如下：
我使用flexbox一行有3个div：
1 | 2 | 3
div1的宽度是固定的。Div2“flexes”以占用1和3之间的可用空间，但应尽量减小其内容的大小（大小不一）。div3需要是它包含的内容的宽度，它是可变的。
所以我有：

1 (fixed with) | 2 (flexes, but minimal width should be the width of the content) | 3 (width of content)

我想实现的是，如果所有三个div所在的容器变得太小，无法满足每个div的最小宽度要求，那么中间部分（div2）将被向下推。所以我得到：

1 | 3
-----
  2

我知道如何使用javascript实现这一点，但如果事先不知道2和3内容的宽度，那么是否可以使用纯CSS解决方案？
这里有一个代码笔，它还没有做我想做的，但可以作为一个起点来节省你一些时间：http://codepen.io/anon/pen/grBwEp
注：我知道怎样才能得到

 1 | 3
 -----
   2

通过更改1 | 2 | 3属性。但是，我不能为开关设置固定的断点，因为我不知道内容的宽度，而且内容会有所不同。。。

最佳答案

如果添加child2并按如下所示最后（width: 100%）排序，则可以强制第二个子项（order: 3）位于新行中：

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  text-align: center;
  color: white;
  font-weight: bold;
}

.container > div.child1 {
  width: 150px;
  background-color: red;
  order: 1;
}

.container > div.child2 {
  background-color: blue;
  order: 3;
  width:100%;
}

.container > div.child3 {
  background-color: green;
  order: 2;
}

<div class="container">
  <div class="child1">1 (fixed width)</div>
  <div class="child2">2 (flexes, but minimal width should be the width of the content)</div>
  <div class="child3">3 (width of content)</div>
</div>

关于html - 纯CSS解决方案可将3个元素的中间部分压低，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36908513/