Why Does an Absolutely Positioned Flex Item Affect Layout in IE11?

Absolutely Positioned Flex Item Included in Normal Flow in IE11

In a flexbox layout, elements are arranged in a row or column based on their flex properties. However, when an element within the flexbox is absolutely positioned, it becomes an out-of-flow element and should not participate in the layout.

In the provided code example:

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

The ".bg" div is absolutely positioned. Despite this, in IE11, the space between the flex items is distributed as if the ".bg" div were part of the normal flow. This is a deviation from the flexbox specification.

Workaround:

To resolve this issue, one workaround is to move the absolutely positioned ".bg" div between the other two flex items:

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

With this structural change, the ".bg" div no longer affects the distribution of space between the flex items, and the desired layout is achieved.

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