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 think this would be a solution. But I needed an auxiliar wrapper for the side elements.

You cant set a minimum width (arbitrary) on the side containers. I have set this to 10px, just to give the idea.

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

Answer 2

I'm don't think it is possible with CSS alone to suit all your conditions and without adding a wrapper div - using any method.

You can get pretty close using a combination of position:absolute and margin-left except that the middle element won't be exactly in the centre.

.container {
  background-color: powderblue;
  margin: 40px;
  white-space: nowrap;
}
.item1, .item2, .item3 {
  background: tomato;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.item1 {
  position: absolute;
  background: green;
  z-index: 0;
}
.item2 {
  margin-left: 50%;
  //transform: translateX(-50%); /* will center, but then no way to pull item3 back */
  z-index:1;
}
.item3 {
  z-index:1;
}

<div class="container">
  <div class="item1"> Lorem ipsumd dolor heth ehe h </div>
  <div class="item2">center content</div>
  <div class="item3">float left after center</div>
</div>

position the first item with a lower z-index - incase the first item is really long

<div class="container">
  <div class="item1"> Lorem ipsumd dolor sit amet fgfdg theth ehe h Lorem ipsumd dolor sit amet fgfdg theth ehe h </div>
  <div class="item2">center content</div>
  <div class="item3">float left after center</div>
</div>

Answer 3

Not sure if using display-table might be the better solution for my problem. It seems to look good with all different content lengths. Not sure how the

max-width: 10px;

works on the .table-cell but seems to do the job..

.display-table {
  display: table;
  height: 70px;
  background-color: powderblue;
  width: 100%;
  margin: 10px 0;
}

.table-row {
  display: table-row;
}

.table-cell {
  border: solid 1px black;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: tomato;
  max-width: 10px;
}

.table-cell:first-child,
.table-cell:last-child {
  text-align: left;
}

<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsumd dolor sit amet</div>
    <div class="table-cell">center content</div>
    <div class="table-cell">float left after center</div>
  </div>
</div>


<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsum dolor sit amet</div>
    <div class="table-cell">center content center content center content</div>
    <div class="table-cell">float left after center</div>
  </div>
</div>


<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat asperiores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet</div>
    <div class="table-cell">center content</div>
    <div class="table-cell">float left after center</div>
  </div>
</div>



<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat asperiores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet</div>
    <div class="table-cell">center</div>
    <div class="table-cell">float left after center float left after center periores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet
    </div>
  </div>

Answer 4

Just add this to your CSS

 .flex-item:nth-of-type(1),.flex-item:nth-of-type(3)
    {
      margin-right:auto;
    }

.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:nth-of-type(1),.flex-item:nth-of-type(3)
{
  margin-right:auto;
}
.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>

Answer 5

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>