IE11 flexbox 容器不增长

Question

考虑以下 sn-p：

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 3px solid red;
}
.action {
  flex-basis: 100%;
  flex-shrink: 1;
  width: 100%;
}
.button {
    font-size: 12px;
    line-height: 3rem;
    width: 100%;
}

<div class="container">
  <div class="action">
    <button class="button" type="button">
      Button label 1
    </button>
  </div>
  <div class="action">
    <button class="button" type="button">
      Button label 2
    </button>
  </div>
</div>

在 Chrome 中，按钮是垂直显示的，并且容器会增长以适应它们：

但是，在 IE11 中，按钮重叠并且容器仍然小于 1 个按钮：

这是 IE 中的已知错误吗？ （如果是，将不胜感激）

有已知的解决方法吗？

Answer 1

好的，我想通了！问题是align-items: center;。我相信这正是您正在寻找的（没有更改 html）：

.container {
  display: flex;
  flex-direction: column;
  border: 3px solid red;
}
.button {
  font-size: 12px;
  line-height: 3rem;
  width: 100%;
}

旁注： 我知道 VM 框说 MSEdge Win10 预览版，但这确实是 IE11。较深的蓝色“e”图标是 MS Edge。我不得不打开记事本并制作一个本地 HTML 文件，因为 codepen 不适用于 IE 11，而且我不想修复我的缩进。