Perché non giustifica il contenuto: il lavoro di centro in IE?

Question

I have this simple div with a button inside of it. justify-content: center; funziona bene con Firefox e Chrome, ma non funziona su 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>

Il mio obiettivo è che, quando uso transform con rotate(90deg) o 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>

I numeri height e width di div e button sono sempre gli stessi, ma sono personalizzabili.

Per quanto possibile, preferisco non inserire elementi.

Answer 1

IE11 richiede che il genitore abbia flex-direction: column.

questo esempio ha il pulsante ruotato:

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