web-dev-qa-db-fra.com

Les éléments Flex ignorent le pourcentage de remplissage dans Firefox

J'essaie d'ajouter du rembourrage à un élément à l'intérieur d'un display:flex élément. Lorsque le remplissage est défini en pourcentage, il ne s'affiche pas dans Firefox, bien qu'il le soit lorsqu'il est défini dans px. Les deux cas fonctionnent comme prévu dans Chrome.

div {
    background: #233540;
}
div > div {
    color: #80A1B6;
}
.parent {
    display: flex;
}
.padded {
    padding-bottom: 10%;
}
<div class="parent">
    <div class="padded">
        asdf
    </div>
</div>

Chrome:

chrome

Firefox:

Firefox

Edit : Cela peut être dû à la décision de Mozilla d'interpréter les pourcentages verticaux par rapport à la hauteur du conteneur parent. Ça me semble fou. https://bugzilla.mozilla.org/show_bug.cgi?id=851379

Édition 2 : Oui, il semble que la spécification définit réellement le remplissage vertical et la marge comme étant résolus par rapport à la hauteur du conteneur, donc peut-être Chrome est celui qui ne respecte pas la spécification? https://drafts.csswg.org/css-flexbox/#item-margins

htmlcssfirefoxflexbox
38
nvioli

Voir https://lists.w3.org/Archives/Public/www-style/2015Sep/0038.html

Pourcentages Grille/Flex

  • Le groupe a essayé de déterminer comment les marges et les rembourrages en pourcentage verticaux sont définis.
    • Remarque: Les marges supérieure et inférieure en CSS se sont traditionnellement résolues par rapport à la largeur du bloc contenant au lieu de sa hauteur, ce qui a des effets utiles mais est généralement surprenant. Les modes de mise en page existants doivent bien sûr continuer à le faire.
    • La résolution de groupe précédente avait été pour l'option 2 (ci-dessous), mais Google a estimé qu'ils avaient de nouvelles informations concernant le comportement abspos qui méritaient un réexamen.
    • La discussion s'est résumée à trois solutions possibles:
      • Option 1: résolvez toujours les pourcentages par rapport à la largeur.
      • Option 2: la grille et le flex se résolvent en fonction de la hauteur, et les éléments abspos se résolvent toujours en fonction de la largeur.
      • Option 3: la grille et la flexion, y compris leurs éléments abspos, se résolvent contre la hauteur. Les abspos ailleurs continuent de se résoudre contre la largeur.
    • Dans un sondage de paille, le groupe était divisé à parts égales entre les options 1 et 3.
    • Microsoft s'opposerait à l'option 1 et Google à l'option 3, de sorte que la discussion a atteint une impasse et se poursuivra en privé pendant le F2F dans l'espoir de parvenir à une conclusion.

Voir https://lists.w3.org/Archives/Public/www-style/2015Sep/0113.html ,

Suivi Flexbox%

  • [...] il n'y avait toujours pas de conclusion.

Le courant spécification Flexbox met en garde à ce sujet:

Les marges et rembourrages en pourcentage sur éléments flexibles peuvent être résolus par:

  • leur propre axe (les pourcentages gauche/droite se résolvent contre la largeur, le haut/bas se résolvent contre la hauteur)
  • l'axe en ligne (les pourcentages gauche/droite/haut/bas sont tous résolus par rapport à la largeur)

Un agent utilisateur doit choisir l'un de ces deux comportements.

Remarque: cette variance est nulle, mais elle capture avec précision l'état actuel du monde (pas de consensus entre les implémentations et pas de consensus au sein du CSSWG). Le CSSWG a l'intention que les navigateurs convergent vers l'un des comportements, auquel cas les spécifications seront modifiées pour l'exiger.

Les auteurs doivent éviter d'utiliser des pourcentages dans les rembourrages ou les marges sur éléments flexibles entièrement, car ils obtiendront un comportement différent dans différents navigateurs.

Cependant, plus récemment, le CSS WG résol (avec ne certaine controverse ):

flexbox et les éléments de la grille, la marge supérieure et inférieure et le pourcentage de remplissage se résolvent par rapport à la direction en ligne disponible.

Voir la mise à jour projet de l'éditeur .

40
Oriol

Pour moi, cela fait l'affaire: ajouter display: table à la div. Je ne sais pas si cela cause d'autres problèmes.

    div {
        background: #233540;
        display: table;
    }
    div > div {
        color: #80A1B6;
    }
    .parent {
        display: flex;
    }
    .padded {
        padding-bottom: 10%;
    }
    <div class="parent">
        <div class="padded">
            asdf
        </div>
    </div>
19
Jevado

Essaye ça:

.padded {
    padding-bottom: 10vw;
}
7
Discotune

Le projet de spécification actuel dit

Les marges et rembourrages en pourcentage des éléments flexibles, comme ceux des blocs de blocs, sont résolus par rapport à la taille en ligne de leur bloc contenant, par exemple les pourcentages gauche/droite/haut/bas sont tous résolus par rapport à la largeur de leur bloc contenant dans les modes d'écriture horizontale.

Donc, Firefox est désormais incorrect selon la dernière version.

Discussion CSSWG: https://github.com/w3c/csswg-drafts/issues/2085 Référence du journal des modifications des spécifications: https://drafts.csswg.org/css-flexbox/# change-2017-margin-padding-percent Spécifications actuelles sur les marges des éléments flexibles: https://drafts.csswg.org/css-flexbox/#item-margins

2
preaction