Flexbox, float or display table

Question

Update Please note kukkuz's answer is a nice hack but it is NOT working 100% if the first box becomes more content see this fiddle then the center box starts moving to the right

What I need is something like this:

Where:

1. First box "Lorem ipsumd dolor sit amet" has always to be left positioned

2. Second box "center content" has always to be centered

3. Third box "float left after center" has to be right after the center box

4. All of those boxes will have variable content length so it can be less content then shown in picture or much more. For every single of those 3 tomato colored boxes

This is what I have

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

Now not sure how to achieve the desired result. Is flex-box the right way to go or should I use display-table? I'm 97% sure it doesn't work with floating. How can I achieve the desired result?

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)

Answer 1

I certainly miss justify-self but you can try a hack: add margin-right: auto to the first and third flex-items - see demo below:

.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;
}

.auto {
  margin-right: auto;
}

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