IE和Edge中的flexbox最小宽度失败

Question

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

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

目标是使居中表格的最小宽度最小，某些列的宽度相同（比率相同）。

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

我能够提出在Firefox和Chrome（link）上可以使用的解决方案。

但是对于Edge和IE11来说，表的拉伸就好像它不在flex容器中一样（尝试在Firefox或Chrome上注释display: flex;，结果是像Edge上那样拉伸表。

另外，有时设置列也可以正常工作（link2）。但是我没有看到Edge / IE11中断时的模式。

这里是我想要实现的更多生产示例（在Chrome / Firefox中可以运行，在Edge / IE11中可以运行）："production" table example。

任何想法如何在Edge / IE11上实现我想要的功能？ （我将要实现的内容加粗了）。

如果我可以继续使用flexbox容器（可能需要在我的代码库中进行更多更改）会很好，但是我认为如果需要的话，可以从style=width:p%中删除<col>。

Answer 1

{/ {1}}规则显然在Edge / IE11中被忽略。

有一个等效的命令似乎起作用。

代替：

min-width

使用：

.inner {
    min-width: 800px
}

revised codepen

---

注释：

在这种情况下，
1. .inner { flex-basis: 800px; /* 1 */ flex-shrink: 0; /* 2 */ } 替代了flex-basis（请参阅：flex-basis vs width）
2. width确保flex-shrink: 0 / flex-basis不能降低到800px以下（因此，两个规则共同模拟width）