为什么 justify-content: center 不在 IE 中工作？

Question

I have this simple div with a button inside of it。 justify-content: center; 在 Firefox 和 Chrome 上运行良好，但在 IE 11 上无法运行：

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
}

<div id="div">
  <button id="button">HELLO</button>
</div>

我的目标是，当我将transform 与rotate(90deg) 或rotate(270deg) 一起使用时，the button will fit into the div：

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
  transform: rotate(90deg);
}

<div id="div">
  <button id="button">HELLO</button>
</div>

div 和 button 中的 height 和 width 始终相同，但可以自定义。

我尽量不包装元素。

Answer 1

就我而言，我必须将 flex 容器的高度设置为 100%。 justify-content 之后就没有问题了。

我还必须将（第一级）儿童的最大宽度设为 100%，以修复一些水平溢出的内容。

Answer 2

IE11 需要父级拥有flex-direction: column。

这个例子让你的按钮旋转：

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
  transform: rotate(90deg);
}

<div id="div">
  <button id="button">HELLO</button>
</div>