An absolute positioned element in a flex container is still considered an element in IE and Firefox

Question

If I have several elements with the justify-content: space-between property in the flex container, and I want one of them to be absolute, and remove the flex from the stream, as shown here:

This works in Chrome, but not in IE and Firefox, since the absolute layout element is considered width 0, but still in a flexible stream:

Is there a fix for this, keeping the layout as it is?

Codepen

Answer 1

It turns out that all it takes is three simple steps

( Demo )

1). Set the left and right margins for each child automatically.

 img { margin-left: auto; margin-right: auto; } 

2). Set left margin for first child 0

 img:nth-child(2) { margin-left: 0; } 

3). Set the right margin for last child 0

 img:last-child { margin-right: 0; } 

If you skip any of these steps, it will not work correctly.

This works in firefox and chrome, I have not tested it in any other browsers.

EDIT:

Thanks @Pontiacks

Apparently you can get away with adding margin-left: auto to img:nth-child(2)

updated jsfiddle

Answer 2

I have a much simpler hack to solve this particular problem.

 div { background-color: #66BB66; display: flex; position: fixed; width: 100%; justify-content: space-between; } div > img:nth-child(2) { position: absolute; left: 0; } 

 <div> <img src="http://www.fillmurray.com/150/150"> <img src="http://www.fillmurray.com/150/100"> <img src="http://www.fillmurray.com/150/150"> </div> 

Just change the order in the DOM. The completely positioned element is still where you put it, and although flexbox still treats it as if it is in a stream, its position in the stream (in dom) makes flexbox allocate space the same way in all browsers.

I believe that you can use the order property to achieve the same.

Answer 3

I found that none of them handled my case, because I have three elements that I want to have evenly distributed, and one absolutely located brother. I found a trick in this case - just add margin-right: auto to the first element to be evenly distributed, and margin-left: auto so that the last element is evenly distributed. You can check it out on this fiddle http://jsfiddle.net/tch6y99d/