wake-up-neo.com

Warum funktioniert justify-content: center nicht im IE?

Ich habe dieses einfache div mit einem Button drin . justify-content: center; funktioniert gut mit Firefox und Chrome, aber nicht unter 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, wenn ich transform mit rotate(90deg) oder rotate(270deg) verwende, der Button in das div passt: 

#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 gleich, jedoch anpassbar.

So weit wie möglich ziehe ich es vor, Elemente nicht einzuwickeln.

17
KaeL

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

In diesem Beispiel wurde der Button 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>

43
misterManSam

In meinem Fall musste ich die Höhe des Flex-Containers auf 100% bringen. justify-content funktionierte danach problemlos.

Ich musste auch die maximale Breite der (ersten) Kinder für 100% festlegen, um einen horizontal überlaufenden Inhalt zu korrigieren.

0
Rafalfaro