为什么 IE11 Flex 容器中的文本不换行，如何修复它？

IE11 中的 Flex 容器换行问题：解决方案和解决方法

使用 Flex 容器对齐文本元素时，我们发现文本Chrome 和 IE11 中的换行行为有所不同。具体来说，在 IE11 中，Flex 容器内的文本无法换行，导致溢出。

已知错误和解决方法

这确实是 IE11 中的已知错误。要解决此问题，需要显式指定 Flex 容器内子元素的宽度。将以下 CSS 规则添加到您的代码中应该可以解决换行问题：

.child {
  width: 100%;
}

替代解决方法

替代解决方法包括使用 flex-basis: 100% 或 flex： 1 在子元素上。这些选项还强制 IE11 了解并尊重 Flex 容器内块级子元素的预期全宽占用。

示例

.child {
  flex-basis: 100%;
}

说明

IE11 需要显式宽度声明来识别子元素应占据父 Flex 容器内的全部可用空间。相比之下，即使没有显式声明，Chrome 也会表现出预期的换行行为。

以上是为什么 IE11 Flex 容器中的文本不换行，如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！