IE11 flexbox 容器不增长

Question

考虑以下片段：

.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 一起使用，并且不关心修复我的缩进。

IE11 flexbox 容器不增长

IE11 flexbox container does not grow

html

css

flexbox

internet-explorer-11