web-dev-qa-db-fra.com

multiline-flexbox dans IE11 calcul incorrect des largeurs?

Il semble qu'IE11 ne calcule pas correctement la largeur des éléments flexibles si flex-wrap: wrap est utilisé.

Voir http://jsfiddle.net/MartijnR/WRn9r/6/

Les 4 cases ont chacune une base flexible: 50%, nous devrions donc avoir deux lignes de deux cases chacune, mais dans IE11 chaque case reçoit une ligne. Lorsque vous définissez la bordure sur 0, cela fonctionne correctement.

Une idée s'il s'agit d'un bug ou s'il existe un moyen de faire en sorte qu'IE11 se comporte (et utilise toujours des bordures)?

<section>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</section>

section {
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    -ms-flex: 50%;
    -moz-flex: 50%;
    -webkit-flex: 50%;
    flex: 50%;
    box-sizing: border-box;
    margin:0;
}

P.S. Dans mon projet, seule la dernière version des navigateurs populaires doit être prise en charge, heureusement, mais IE11 en fait partie.

csscss3internet-explorer-11flexbox
32
Martijn van de Rijdt

Il ressemble à un bogue où box-sizing N'est pas pris en compte lors du calcul de la taille à l'aide de la propriété flex. Comme la bordure occupe 2 pixels, elle est supérieure à 50% et donc un seul tient sur une ligne, donc toutes les boîtes sont étirées sur toute la largeur. Vous pouvez voir la même chose se produire si vous désactivez la bordure et ajoutez à la place un remplissage 2px.

Vous pouvez le faire fonctionner correctement tout en conservant les bordures en ajoutant max-width: 50% À l'ensemble de règles .box. Sinon, vous pouvez utiliser une valeur flexible comprise entre 33,34% et 49%. Cela rendra la largeur inférieure à 50%, y compris la bordure, et à mesure que les éléments se développeront pour remplir l'espace disponible, ils constitueront toujours 50% du conteneur flexible. Une sorte de hack laid, mais cela fonctionnera sauf si vous ajoutez une bordure et un rembourrage combinés supérieurs à 50% moins la valeur de flex que vous définissez.

Peut-être un meilleur moyen que de diminuer directement la valeur en pourcentage consiste à utiliser calc(). Ceci est pris en charge par tous les navigateurs prenant en charge la syntaxe moderne Flexbox. Il vous suffit de soustraire le total combiné des remplissages et marges gauche et droit du pourcentage que vous souhaitez utiliser. Au fur et à mesure que vous '' En faisant cela, vous n'avez pas vraiment besoin de la propriété box-sizing pour qu'elle puisse être supprimée. Il semble y avoir un autre problème dans IE où vous ne pouvez pas utiliser calc dans le flex raccourci mais vous pouvez l'utiliser dans la propriété flex-basis, qui est celle que vous souhaitez.

.box {
    border: 1px solid black;
    /* additional styles removed for clarity */

    /* 
    50% - (border-left-width + border-right-width +
           padding-left + padding-right)
    */
    -webkit-flex-basis: calc(50% - 2px);
    flex-basis: calc(50% - 2px);
}

Voir la démo: http://jsfiddle.net/dstorey/78q8m/3/

35
David Storey

Philip Walton a un excellent résumé de ce bogue ici: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box . Il propose deux solutions, la plus simple étant de définir flex-basis: auto Et de déclarer un width à la place. (Pas max-width Ou min-width.) Cette solution a l'avantage de ne pas avoir à ajuster votre calc() lorsque vous modifiez le rembourrage ou les largeurs de bordure.

7
nabrown

Il s'agit clairement d'un bug IE alors laissez le CSS [correct] d'origine et ajoutez un hack qui cible IE10 +:

/* IE10+ flex fix: */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .box {
        flex: 0;
        min-width: 50%;
    }
}

http://jsfiddle.net/stedman/t1y8xp2p/

6
stedman