Why doesn't justify-content: center work in IE?

问题

I have this simple div with a button inside of it. justify-content: center; works fine using Firefox and Chrome, but does not work on 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>

My goal is that, when I use transform with rotate(90deg) or 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>

The height and width of the div and button are always the same, but are customizable.

As much as possible, I prefer not wrapping elements.

回答1:

IE11 needs the parent to have flex-direction: column.

This example has your button rotated:

#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>

回答2:

In my case I had to make the flex container's height 100%. justify-content worked without a problem after that.

I also had to make the (first level) children's max-width 100% to fix some content overflowing horizontally.

来源：https://stackoverflow.com/questions/29270465/why-doesnt-justify-content-center-work-in-ie