Pontiacks Pontiacks - 1 year ago 96
CSS Question

Absolute positioned item in a flex container still gets considered as item in IE & Firefox

If I have multiple elements with the property

justify-content: space-between
in a flex container and I want to absolute position one of them and remove from the flex flow, as showed here:
hoped result

This works in Chrome but not in IE and Firefox as the absolute positioned element is considered as 0 width, but still in the flex flow:
bugged result

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


Answer Source

It turns out that all it takes is three simple steps


1). Set the left and right margin to auto on each child

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

2). Set the left margin on the first child to 0

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

3). Set the right margin on the last child to 0

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

If you miss any of these steps it will not work properly

This works in firefox and chrome, I haven't tested it in any other browsers.


Thanks to @Pontiacks

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

updated jsfiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download