为什么不能证明内容:在IE中心工作？

Question

我有这个简单的div,里面有一个按钮.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),该按钮就会融入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>

该height和width的div和button始终是相同的,但是是可定制的.

尽可能地,我不喜欢包裹元素.

Answer 1

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>

Answer 2

就我而言，我必须将flex容器的高度设为100％。证明内容在此之后没有任何问题。

我还必须使（第一级）儿童的最大宽度为100％，以解决一些水平溢出的内容。