html - IE 11 问题与最大宽度的 flexbox 元素

Question

在 IE 11 中，如果元素具有最大宽度属性，则元素无法正确居中。但是，此示例适用于 Chrome 和 Firefox。

JS Bin

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  width: 100%;
}

.red {
  background-color: red;
  flex-grow: 1;
  display: flex;
  max-width: 200px;
}

<div class="container">
  <div class="red">non centered box</div>
</div>

Answer 1

这是一个错误。但是根据IE Feedback它应该已经修复了。

作为变通方法，如果您不必使用 flex-grow: 1;，您可以删除它。