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一起使用，也不在乎修復我的縮進。