Why Doesn't Text Wrap in IE11 Flex Containers, and How Can I Fix It?

Flex Container Wrap Issue in IE11: Resolution and Workaround

When utilizing a flex container to align text elements, it has been observed that text wrapping behaves differently in Chrome and IE11. Specifically, in IE11, text within the flex container fails to wrap, resulting in overflow.

Known Bug and Workaround

This is indeed a known bug in IE11. To resolve this issue, it is necessary to explicitly specify the width of the child elements within the flex container. Adding the following CSS rule to your code should resolve the wrapping issue:

.child {
  width: 100%;
}

Alternate Workarounds

Alternative workarounds include using flex-basis: 100% or flex: 1 on the child elements. These options also force IE11 to understand and respect the intended full width occupancy of block-level child elements within a flex container.

Example

.child {
  flex-basis: 100%;
}

Explanation

IE11 requires an explicit width declaration to recognize that the child elements should occupy the full available space within the parent flex container. In contrast, Chrome exhibits the expected wrapping behavior even without this explicit declaration.

The above is the detailed content of Why Doesn't Text Wrap in IE11 Flex Containers, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!