Why Are Absolutely Positioned Flex Items Not Removed From the Normal Flow in IE11?

Absolutely positioned flex items cannot be removed from normal flow in IE11

Problem:

In two divs with content and a third div with absolute position in the background In this case, the container is a flexbox. This works fine in both Chrome and Safari, but Firefox and IE11 take the absolutely positioned div into account and distribute the space between the divs as if there were three divs in three rows.

Analysis:

Firefox treats the absolutely positioned third div as an in-flow flex item and takes it into account in the space-between calculation. (Same goes for IE11; Chrome and Edge ignore it.)

Obviously, this is inconsistent with the current flexbox spec:

4.1. 绝对定位的弹性项

由于它不在流中，一个 flex 容器的绝对定位从属项不会参与 flex 布局。

Workaround:

• Move absolute positioning div

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

• Use CSS Grid layout

CSS Grid layout does not consider absolutely positioned elements, so it This problem can be solved.

Note:

For Firefox, this issue has been resolved in v52. However, IE11 still has this problem.

The above is the detailed content of Why Are Absolutely Positioned Flex Items Not Removed From the Normal Flow in IE11?. For more information, please follow other related articles on the PHP Chinese website!