Why Does an Absolutely Positioned Flex Item Remain in Normal Flow in IE11?

Absolutely Positioned Flex Item Remains in Normal Flow in IE11

In a flexbox layout with three divs, two containing content and one positioned absolutely as a background, IE11 treats the absolutely positioned div as part of the normal flow, distributing space between divs accordingly. This behavior differs from standards and can lead to misalignment.

Workaround:

Firefox has resolved this issue in version 52, aligning with the flexbox specification. However, IE11 remains problematic. To address this:

• Reposition the Absolutely Positioned Item: Instead of placing the absolutely positioned div (.bg) at the end, move it between the other two (.c1 and .c2). This changes the flow order, effectively removing the absolutely positioned element from the normal flow.

Here's the updated HTML code:

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>
</div>

The above is the detailed content of Why Does an Absolutely Positioned Flex Item Remain in Normal Flow in IE11?. For more information, please follow other related articles on the PHP Chinese website!