Dlaczego nie usprawiedliwiać treści: praca centrum w IE?

Question

I have this simple div with a button inside of it. justify-content: center; działa prawidłowo przy użyciu przeglądarki Firefox i Chrome, ale nie działa na 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>

Moim celem jest to, że gdy używam transform z rotate(90deg) lub 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>

height i width z div i są zawsze takie same, ale można je dostosować.

W miarę możliwości wolę nie owijać elementów.

Answer 1

IE11 potrzebuje rodzica, aby mieć flex-direction: column.

Ten przykład twoja przycisk obracany:

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