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

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>


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.