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


if have multiple elements property justify-content: space-between in flex container , want absolute position 1 of them , remove flex flow, showed here: hoped result

this works in chrome not in ie , firefox absolute positioned element considered 0 width, still in flex flow: bugged result

is there fix keeping layout is?

codepen

it turns out takes 3 simple steps

(demo)

1). set left , right margin auto on each child

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

2). set left margin on first child 0

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

3). set right margin on last child 0

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

if miss of these steps not work properly

this works in firefox , chrome, haven't tested in other browsers.

edit:

thanks @pontiacks

apparently can away adding margin-left: auto img:nth-child(2)

updated jsfiddle


Comments

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

python - Mongodb How to add addtional information when aggregating? -

java - Incorrect order of records in M-M relationship in hibernate -