Warum nicht gerechtfertigt-Inhalt: Center Arbeit in IE?

Question

I have this simple div with a button inside of it. justify-content: center; funktioniert Firefox und Chrome, aber funktioniert nicht auf 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>

Mein Ziel ist es, dass, wenn ich transform mit rotate(90deg) oder 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>

Die height und width der div und button sind immer die gleichen, sind aber anpassbar.

So viel wie möglich, ich bevorzuge keine Verpackung Elemente.

Answer 1

IE11 benötigt das übergeordnete Element flex-direction: column.

Dieses Beispiel hat Ihre Knopf gedreht:

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