Css 表中的IE11 flexbox-文本未换行

这个问题快把我逼疯了。我试图实现我在谷歌上找到的每一个答案，等等。我只希望图像下的文本在IE11中正确包装，就像其他浏览器在这个容器中所做的那样。内容是一个具有flexbox属性的表。我已将容器设置为设定的宽度。当我允许液体时，它不会在任何地方包裹。但我并不担心。我试着给孩子、父母和祖父母添加

width:100%

和

max width:100%

。我还尝试在我能想到的任何地方添加

flex-basis:100%

。在此方面的任何帮助都将不胜感激

正文{
框大小：边框框；
}
.集装箱{
宽度：500px；
z指数：1000；
浮动：无；
填充：.1rem0；
保证金：0自动；
字体大小：0.9rem；
颜色：#212529；
文本对齐：左对齐；
列表样式：无；
背景色：#fff；
背景剪辑：填充框；
边框：1px实心rgba（0,0,0,15）；
边框底部：5rem实心#008938；
最大高度：计算（100vh-20px）；
溢出y：自动；
溢出x：隐藏；
}
.p-3{
右键：1 em！重要；
}
.文本中心{
文本对齐：居中！重要；
}
d-flex{
显示：flex！重要；
}
.弹性行{
弯曲方向：行！重要；
}
.柔性柱{
伸缩方向：列！重要；
}
.柔性填料{
flex:1自动！重要；
}
.将项目对齐并拉伸{
对齐项目：拉伸！重要；
}
.text nowrap{
空白区：nowrap！重要；
}
.文本暗{
颜色：#212529！重要；
}
.文本静音{
颜色：#bbbbbb；
文本阴影：无；
背景色：透明；
边界：0；
}
img{
填料顶部：.75rem；
填充底部：.75rem；
颜色：#6c757d；
文本对齐：左对齐；
标题侧：底部；
}
a{
文字装饰：无；
}
桌子{
边界塌陷：塌陷；
}

JS-Bin

在HTML中，没有“具有flexbox属性的

这样的东西”

CSS级别2规范中定义的CSS有特定的规则，关于哪些元素可以是哪些元素的子元素以及在哪些条件下

在您的示例中，不能将

display:flex

元素作为

display:table row group

元素的直接子元素。此外，如果

（

display:table row

元素）直接放在

元素下面，您会注意到浏览器会自动在其周围添加一个

（

display:table row group

）包装

这些规则对于表显示模型及其如何生成列大小非常重要。您还应该注意到，表模型是一个非常复杂和缓慢的渲染模型，在处理50多个项目时，您会注意到性能问题，特别是在每个单元格上执行DOM操作时，这不是长方体模型、flexbox模型或网格布局模型的情况

您的代码在某些浏览器中“工作”这一事实与此无关。因为你的CSS规则是无效的，浏览器可以自由地做他们认为最佳的事情，而浏览器和浏览器是不同的，因为没有官方的推荐。 有几种方法可以修复布局，但您可能希望从

s和

s中删除

d-flex

，并根据需要将

内容包装在

d-flex

包装器中（>解决方案1）

另请注意，使用

元素进行布局通常被认为是一个坏主意（=>解决方案2）

---

使用

s：

正文{
框大小：边框框；
}
.集装箱{
宽度：500px；
填充：.1rem0；
保证金：0自动；
字体大小：0.9rem；
颜色：#212529；
文本对齐：左对齐；
列表样式：无；
背景色：#fff；
背景剪辑：填充框；
边框：1px实心rgba（0,0,0,15）；
边框底部：5rem实心#008938；
最大高度：计算（100vh-20px）；
溢出y：自动；
溢出x：隐藏；
}
.文本中心{
文本对齐：居中！重要；
}
d-flex{
显示：flex！重要；
}
.弹性行{
弯曲方向：行！重要；
}
.柔性柱{
伸缩方向：列！重要；
}
.柔性填料{
flex:1自动！重要；
}
.将项目对齐并拉伸{
对齐项目：拉伸！重要；
}
.text nowrap{
空白区：nowrap！重要；
}
.文本暗{
颜色：#212529！重要；
}
.文本静音{
颜色：#bbbbbb；
文本阴影：无；
背景色：透明；
边界：0；
}
img{
填料顶部：.75rem；
填充底部：.75rem；
颜色：#6c757d；
文本对齐：左对齐；
标题侧：底部；
}
运输署{
位置：相对位置；
}
a{
文字装饰：无；
}
td>a>*{
flex-grow:0；
}
td>a>.flex fill{
柔性生长：1；
}
桌子{
宽度：100%；
边界塌陷：塌陷；
表布局：固定；
}
运输署{
宽度：33.33%；
垂直对齐：顶部；
}

JS-Bin

Flexbox和tables在IE上有一些问题，请查看这篇文章——可能是相关的（也就是说，确保子元素的

display

值是正确的），谢谢您的提示。我试着在strong、div、a和td标签上放置

display:block

，但没有效果。你在使用吗？我不相信，为什么？嗯，我在代码中找到了很多对它的引用，所以我们可能是。你所说的一切都有道理。但是，当我在IE11中运行您的两个示例代码段时，这两个代码段都不会产生所需的结果。此外，我们使用的是来自引导的sass和预制类，因此无法对

执行任何操作！重要提示

很不幸，太完美了！非常感谢你！这条线

flex:0133%假定每行有3列。有没有一种方法可以使它动态地允许任意数量的列？我可以使用
auto
？当然可以。你算