弹性盒最小宽度在 IE 和 Edge 中失败

Question

我有一些为元素设置宽度的表格，因此某些列将至少具有容器宽度的某些百分比。

我想使用 flexbox 将此表格居中并为其设置最小宽度。

目标是让居中的表格具有一些最小宽度，某些列将具有相同的宽度（相同的比率）。

如果某些单元格的文本更长，那么我不在乎比例是否会中断（此列的宽度会比其他的大）。我只关心它对于常见情况（单元格中的少量文本数据）具有良好且相同的列宽

我能够想出适用于 Firefox 和 Chrome 的解决方案（链接）。

但是对于 Edge 和 IE11，表格会像不在 flex 容器display: flex;中一样拉伸（尝试对 Firefox 或 Chrome发表评论，结果就像在 Edge 上一样拉伸表格。

此外，看起来有时设置列有效（link2）。但我没有看到它在 Edge/IE11 中何时中断的模式。

这是我想要实现的更多生产示例（在 Chrome/Firefox 中工作，在 Edge/IE11 中拉伸）：“生产”表示例。

任何想法如何在 Edge/IE11 上实现我想要的？（我把我想达到的目标用粗体表示）。

这将是很好，如果我能继续使用Flexbox的容器（它可能需要在我的代码库更多的变化），但我想我会被罚款与删除style=width:p%的<col>，如果这是必要的。

Answer 1

min-widthEdge / IE11 中显然忽略了该规则。

有一个等效的命令似乎有效。

代替：

.inner {
    min-width: 800px
}

用：

.inner {
    flex-basis: 800px; /* 1 */
    flex-shrink: 0;    /* 2 */
}

笔记：