html – Flexbox,浮动或显示表

Update Please note 07000 answer is a nice hack but it is NOT working 100% if the first Box becomes more content see 07001 then the center Box starts moving to the right

我需要的是这样的：

哪里：

>第一盒“Lorem ipsumd dolor sit amet”一直被放置
>第二盒“中心内容”一直以中心为主
>第三个盒子“中心左侧的浮子”必须在中间框之后
>所有这些框将具有可变的内容长度，因此可以减少内容，然后显示在图片或更多内容中。对于这3个番茄色的盒子中的每一个

这就是我所拥有的

.flex-container {
  display: -webkit-Box;
  display: -moz-Box;
  display: -ms-flexBox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  background-color: powderblue;
}

.flex-item {
  background: tomato;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
}

<div class="flex-container">
  <div class="flex-item">Lorem ipsumd dolor sit amet</div>
  <div class="flex-item">center content</div>
  <div class="flex-item">float left after center</div>
</div>

现在不知道如何达到预期的效果。 flex-Box是正确的方式去还是应该使用display-table？我97％肯定它不适用于浮动。如何达到预期效果？

Update from question in comments

Q: suppose the first Box has large content such that the second Box will overlap the first,if it is at the center… how do you look to
handle that?

A: probably with overflow hidden and z-index. It will be a toolbar underneath a gallery. Left Box will describe something of the image,
middle Box is the gallery navigation,and the right Box will display
some “helper” text. so the gallery navigation is the most important
which must always be visible (and centered)

解决方法

我认为这将是一个解决方案。但是我需要一个辅助包装器的侧面元素。

您无法在侧面容器上设置最小宽度(任意)。我把这个设置为10px，只是给出这个想法。

.flex-container {
  display: flex;
  overflow: hidden;
}
.side {
  flex: 10px 1 0;
  background-color: powderblue;
}
.center {
  flex: auto 0 0;
  background: tomato;
}
.side div {
  background: tomato;
  display: inline-block;
}
.flex-item {
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
}

<div class="flex-container">
  <div class="flex-item side">
    <div>Lorem ipsumd dolor sit amet</div>
  </div>
  <div class="flex-item center">center content</div>
  <div class="flex-item side">
    <div>float left after center</div>
  </div>
</div>