Css IE 11中这些div的宽度发生了什么变化，我如何修复它？

如果你看一下IE 11中的内容，你会发现红色框非常宽，它的父框更宽（反过来导致它的父框超宽）。Chrome和Firefox按预期呈现这些div

是什么导致IE中的red.table div如此宽，为什么它的父级更宽？我怎样才能解决这个问题

jsbin中的代码是我在生产中处理的精简版本

.column {
  position: relative;
  width: 83.33333%;
}

.container {
  display: flex;
}

.picker {
  display: flex;
  flex-grow: 1;
}

.table {
  position: relative;
  display: table;
  width: 100%;
  table-layout: fixed;
  border-color: red;
}   

我通过以下方法得到了我认为是您期望的结果：

.card {
  display: flex;
  flex-grow: 1;
}

.container {
  display: flex;
  flex-grow: 1;
}

.picker {
  display: flex;
  flex-grow: 1;
}

.table {
  /* position: relative; */
  display: flex;
  width: 100%;
  table-layout: fixed;
  border-color: red;
}

我注意到问题是从

.card

元素开始的，该元素没有包含CSS，是第一个扩展到其父元素边界之外的元素，子元素

.picker

和

.table

紧随其后

我不确定您在

display:table

上有多灵活-如果这是必要的，那么您可以将其更改为

display:flex

，但我认为您需要一直使用flex才能使其表现良好

---

免责声明：我自己也没有大量使用flexbox。

您应该将

.card

也设置为

display:flex

，或者将其设置为

flex:1 100%

如果出于任何原因，您希望

.picker

成为一个灵活的容器，而不是灵活的项目。

您可以通过将框大小设置CSS属性设置为边框框来解决此问题

正文*{
填充：20px 10px；
边框：1px实心；
字体系列：无衬线；
位置：相对位置；
框大小：边框框；
}

---

您可以查看此文档以了解有关框大小的更多信息。

这修复了最后一个元素上的轻微溢出，但对于OP询问的更大的IE bug来说并没有什么作用