IE Flexbox absolute position layout issue

Issue Description

When an element is absolutely positioned inside a flex object, the layout of other elements can still be affected.

For example, in DOM order, there’s a button, a logo and a menu at the top of the site. The container is the flex object and the three child elements are in the layout.

The absolute button (top and right) will leave some padding to the left of the logo in IE browsers.

How to Fix the Issue

To fix the issue, the second element (the one affected by the layout bug) should have a margin: auto; applied in the opposite direction of the padding space.

References