Why Does IE11 Treat Absolutely Positioned Flex Items as In-Flow Elements?

Absolutely Positioned Flex Item's Interaction with Normal Flow in IE11

In a situation where a container contains multiple divs, one of which is absolutely positioned as a background, IE11 exhibits unconventional behavior compared to other browsers like Chrome or Firefox. While the absolute positioned div is properly removed from the normal flow, IE11 treats it as an in-flow flex item, leading to unexpected distribution of space among the divs.

Root of the Problem

The crux of the issue lies in IE11's violation of the flexbox specification. As per the spec, absolutely positioned flex children should be excluded from the flex layout and not contribute to spacing calculations.

Workarounds

Several workarounds can alleviate this problem in IE11:

Repositioning the Background Div

Instead of placing the absolutely positioned background div after the other divs, move it to a position between them, creating a structure like:

Summary

The mismatch in behavior between IE11 and compliant browsers arises from IE11's adherence to an outdated interpretation of the flexbox specification. By employing one of the workarounds, developers can ensure consistent behavior across browsers when dealing with absolutely positioned flex items.

The above is the detailed content of Why Does IE11 Treat Absolutely Positioned Flex Items as In-Flow Elements?. For more information, please follow other related articles on the PHP Chinese website!