Why Does IE11 Include Absolutely Positioned Flex Items in Layout Calculations?

Absolutely Positioned Flex Item Considered in Flow in IE11

Issue

In a flexbox container with two content-filled divs and one absolutely positioned background div, IE11 (and Firefox prior to version 52) factors in the absolutely positioned div when calculating space distribution. This behavior deviates from the flexbox spec, which states that absolutely positioned items do not participate in flex layout.

Workarounds

Relocate the Absolutely Positioned Div

A possible solution is to move the absolutely positioned div between the other two divs, as illustrated below:

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

Use Flex Wrap

Another workaround is to use flex wrap to force the absolutely positioned item to wrap to a new line. This prevents it from affecting the space distribution of the other items:

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

In Firefox (Until v52): Override Default Behavior

For Firefox (prior to version 52), this CSS property can be used to override the default behavior and remove the absolutely positioned div from the flow:

.container {
    display: -moz-box;  /* Firefox specific property */
    -moz-box-orient: horizontal;  /* Firefox specific property */
}

The above is the detailed content of Why Does IE11 Include Absolutely Positioned Flex Items in Layout Calculations?. For more information, please follow other related articles on the PHP Chinese website!