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

【问题标题】：flexbox min-width failing in IE and EdgeIE 和 Edge 中的 flexbox 最小宽度失败
【发布时间】：2019-05-05 06:41:39
【问题描述】：

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

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

我们的目标是使表格居中，并具有一定的最小宽度，其中某些列将具有相同的宽度（相同的比例）。

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

我想出了适用于 Firefox 和 Chrome (link) 的解决方案。

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

另外，sometime 设置列似乎也可以工作 (link2)。但我看不到它在 Edge/IE11 中的中断模式。

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

有什么想法可以在 Edge/IE11 上实现我想要的吗？（我用粗体表示我想要实现的目标）。

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

【问题讨论】：

【解决方案1】：

min-width 规则显然在 Edge / IE11 中被忽略了。

似乎有一个等效的命令。

代替：

.inner {
    min-width: 800px
}

用途：

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

注释：

flex-basis 是 width 的替代品，在这种情况下（参见：flex-basis vs width）
flex-shrink: 0 确保 flex-basis / width 不能降低到 800px 以下（因此，两个规则一起模拟 min-width）

【讨论】：