web-dev-qa-db-fra.com

Flexbox ne remplit pas la hauteur dans IE11

J'ai ce cas:

http://codepen.io/anon/pen/radoPd?editors=11

Voici le code CSS:

.wrapper{
  background-color: red;
  min-height: 100vh;
  display: flex;
}

.sidebar{
  background: orange;
  flex: 0 0 300px;
}
.main{
  background-color: green;
  overflow-y: scroll;
}

Pour une raison quelconque, sur IE11, ni la barre latérale ni la zone .main ne rempliront toute la hauteur du wrapper.

Il s'agit d'une incohérence entre les navigateurs. Est-ce un bug? Suis-je en train de manquer quelque chose?

cssflexboxinternet-explorer-11
18
Enrique Moreno Tent

Il s'agit d'un bogue IE connu qui a malheureusement été fermé sous la forme Won't Fix par IE Team et décrit comme suit:

Dans tous les autres navigateurs prenant en charge Flexbox, un flex-direction:column le conteneur flexible basé honorera les conteneurs min-height calculer flex-grow longueurs. Dans IE10 & 11-preview, il ne semble fonctionner qu'avec une valeur height explicite.

AFAIK et malgré cette description, le bogue s'applique également lorsque flex-direction est row. Comme mentionné dans les commentaires, Philip Walton a proposé une solution ici , qui comprend le réglage de la hauteur à une valeur fixe, mais ce n'est pas une option pour OP.

Comme solution de contournement, je propose de définir un min-height: 100vh à l'élément main aussi:

.wrapper{
  background-color: red;
  min-height: 100vh;
  display: flex;
}

.sidebar{
  background: orange;
  flex: 0 0 300px;
}
.main{
  background-color: green;
  min-height: 100vh;
}

Stylo ici .

28
Kostas Siabanis