IE 11 中这些 div 的宽度发生了什么变化，我该如何解决？答案

【问题标题】：What is happening to the width of these divs in IE 11, and how can I fix it?IE 11 中这些 div 的宽度发生了什么变化，我该如何解决？
【发布时间】：2018-07-01 18:06:52
【问题描述】：

如果您在 IE 11 中查看http://jsbin.com/tacabepaju/1/edit?html,css,output，您会看到红色框非常宽，而其父级甚至更宽（反过来导致其父级超宽）。 Chrome 和 Firefox 会按预期呈现这些 div。

是什么导致红色 .table div 在 IE 中如此宽，为什么它的父级更宽？我该如何解决这个问题？

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;
}

【问题讨论】：

标签： css internet-explorer html-table width

【解决方案1】：

您可以通过将 box-sizing CSS 属性设置为 border-box

来解决此问题

body * {
  padding: 20px 10px;
  border: 1px solid;
  font-family: sans-serif;
  position: relative;
  box-sizing: border-box;
}

您可以查看此文档https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 了解有关 box-sizing 的更多信息。

【讨论】：

修复了最后一个元素的轻微溢出，但对于 OP 询问的更大的 IE 错误并没有什么影响

【解决方案2】：

您也应该将.card 设置为display:flex，或者如果出于某种原因您希望.picker 成为弹性容器而不是弹性项目，则将其设置为flex: 1 1 100%;。

【讨论】：

【解决方案3】：

我得到了我假设是你想要的结果，使用以下：

.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。

【讨论】：