Flex-Elemente ignorieren Prozent Polsterung in Firefox

Ich versuche, hinzufügen Polsterung an ein element in einem display:flex element. Wenn die Polsterung ist definiert als ein Prozent, es nicht angezeigt wird in Firefox, obwohl es nicht definiert, wenn in px. Beiden Fällen erwartungsgemäß in Chrom.

CSS:

div {
    background: #233540;
}
div > div {
    color: #80A1B6;
}
.parent {
    display: flex;
}
.padded {
    padding-bottom: 10%;
}

HTML:

<div class="parent">
    <div class="padded">
        asdf
    </div>
</div>

Chrome:

Flex-Elemente ignorieren Prozent Polsterung in Firefox

Firefox:

Flex-Elemente ignorieren Prozent Polsterung in Firefox

Bearbeiten:
Dies kann sein, weil Mozilla die Entscheidung zu interpretieren vertikale Prozentsätze mit Bezug auf die Höhe des übergeordneten Containers. Scheint verrückt zu mir. https://bugzilla.mozilla.org/show_bug.cgi?id=851379

Edit 2:
Ja, es scheint, dass die Spezifikation definiert das vertikale padding und margin so entschlossen gegen die Höhe des Containers, also vielleicht Chrome ist das man nicht zu Ehren der Skillung?
https://drafts.csswg.org/css-flexbox/#item-margins

RE: Edit 2: eigentlich die spec definiert es als eine Wahl, die für den browser zu verwenden, entweder die Höhe oder die Breite für top/bottom margin/padding, solange Sie konsistent sind und verwenden Sie immer eine oder die andere für alle anderen Situationen. So, Firefox und Chrom sind zu Ehren des spec.
Beste Antwort ist wohl auch nach der aktuellen spec: "Autoren sollten vermeiden Sie die Verwendung von Prozentangaben in Polstern oder Ränder auf flex-Elemente vollständig sind, bekommen Sie unterschiedliches Verhalten in verschiedenen Browsern."

InformationsquelleAutor nvioli | 2015-11-03

40

Sehen https://lists.w3.org/Archives/Public/www-style/2015Sep/0038.html
Gitter/Flex-Prozentsätze
- Die Gruppe versucht, arbeiten durch, wie die senkrechten Anteil Margen
  und Polster sind definiert.
  
  Hinweis: die Oberen und unteren Ränder in CSS traditionell
  aufgelöst enthaltenden block-Breite, statt dessen
  Höhe, die einige nützliche Effekte, ist aber generell
  überraschend. Bestehende layout-Modi muss natürlich weiter
  um so zu tun.
  
  Vorherigen Gruppe die Auflösung war für option 2 (unten), aber
  Google meinten, Sie hätten neue Informationen über abspos
  Verhalten, das verdient ein Umdenken.
  
  Die Diskussion kam auf drei mögliche Lösungen:
  
  Option 1: Immer beheben Prozenten gegen die Breite.
  
  Option 2: Netz-und flex-lösen gegen der Höhe, und
  abspos Elemente immer vollständig gegen die Breite.
  
  Option 3: Netz-und flex, einschließlich Ihrer abspos Artikel,
  beheben gegen die Höhe. Abspos anderswo
  weiterhin mit Entschlossenheit gegen die Breite.
  
  In einer Meinungsumfrage wurde die Gruppe ziemlich gleichmäßig geteilt zwischen
  Optionen 1 und 3.
  
  Microsoft würde gegen option 1 und Google option 3,
  also die Diskussion in eine Sackgasse geraten und werden fortgeführt
  privat während das F2F in der Hoffnung, einen Abschluss.
Sehen https://lists.w3.org/Archives/Public/www-style/2015Sep/0113.html,
Flexbox - % Follow-Up
- [...] es war noch kein Abschluss.
Den aktuellen Flexbox-spec warnt vor dieser:
Prozentualen Margen und Polster auf flex-Elemente gelöst werden können
entweder gegen:
- Ihre eigene Achse (Links/rechts Prozentsätze Entschlossenheit gegen Breite, oben/unten lösen, gegen Höhe)
- die inline-Achse (Links/rechts/oben/unten Prozentsätze aller Entschlossenheit gegen Breite)
Einen User-Agent muss wählen Sie eine der beiden Verhaltensweisen.

Hinweis: Diese Varianz ist Scheiße, aber es genau erfasst die aktuellen
Zustand der Welt (kein Konsens zwischen den Implementierungen, und keine
Konsens innerhalb der CSSWG). Es ist die CSSWG die Absicht, die Browser
werden konvergieren auf eine der Verhaltensweisen, bei denen mal die Skillung sein wird
geändert, zu verlangen, dass.

Autoren sollten vermeiden Sie die Verwendung von Prozentangaben in Polstern oder Ränder auf flex-Elemente ganz, da Sie ein anderes Verhalten in
verschiedene Browser.
Allerdings, in jüngerer Zeit die CSS WG gelöst (mit einige kontroversen):

Beide flexbox-und grid-Elemente top und bottom margin und padding Prozent aufgelöst wird, die gegen die verfügbaren inline-Richtung.

Finden Sie die aktualisierte editor ' s draft.
- Wow. Vielen Dank für Ihre umfangreiche sourcing auf die Politik usw, sehr nützlich. Jede Empfehlung auf die eigentliche Definition von Kennzahlen? css-tricks.com/aspect-ratio-boxes
- Oriol ' s Antwort war/ist sehr hilfreich. Eine gute Nachricht: ab Januar 2018 sowohl Edge und FF haben vereinbart, die Umsetzung der aktuellen Chrome-Methode mit der nächsten version von Edge und v60 von FF. Siehe: bram.uns/2017/07/30/... für mehr Informationen.
InformationsquelleAutor Oriol
19

Für mich funktioniert der trick: hinzufügen von display: table-div. Weiß nicht, ob andere Ursachen Probleme obwohl.

CSS:
```
    div {
        background: #233540;
        display: table;
    }
    div > div {
        color: #80A1B6;
    }
    .parent {
        display: flex;
    }
    .padded {
        padding-bottom: 10%;
    }
```
HTML:
```
    <div class="parent">
        <div class="padded">
            asdf
        </div>
    </div>
```
- Ja, die änderung der display von der übergeordneten macht, dieses Verhalten zu ändern, aber die Frage ist speziell über flex Elemente.
- Obwohl dies nicht wirklich die Frage beantworten, bietet es einen hack, der das problem behoben bei der hand, die derzeit ungelöst ist jedoch auf eine allgemeinere Grundlage.
InformationsquelleAutor Jevado
7

Versuchen Sie dies:
```
.padded {
    padding-bottom: 10vw;
}
```
- Zur Verbesserung der Qualität Ihrer Antworten, fügen Sie bitte eine Erklärung, die wahrscheinlich dazu führen, dass der Fragesteller das problem und wie Ihre vorgeschlagene Antwort eine Verbesserung darstellt. Enthält links zu Ressourcen, die Sie nützlich finden auf die Frage.
- Dies war die perfekte Lösung für mich. Nicht sicher, warum niemand anderes es von Ihnen positiv bewertet werden.
- Dies wird nicht funktionieren, wenn Sie wollen, Sie bleiben statisch auf eine bestimmte Breite, da Breite ist nicht relativ zum übergeordneten container, es ist die Breite des gesamten browser (bedeutet, dass es halten werde Polsterung, soweit der browser wächst–etwas, das nicht gewünscht wird, wenn man einen container mit einer max Breite).
InformationsquelleAutor Discotune
2

Den aktuellen Entwurf spec sagt

Prozentualen Margen und Polster auf flex-Elemente, wie jene, die auf block-Boxen sind entschlossen, gegen die inline-Maximalgröße von Ihren übergeordneten block, z.B. Links/rechts/oben/unten Prozentsätze aller Entschlossenheit gegen Ihre mit block Breite in horizontaler schreiben-Modi.

So, Firefox ist jetzt falsch, nach dem neuesten Entwurf.

CSSWG Diskussion: https://github.com/w3c/csswg-drafts/issues/2085
Spec changelog Referenz: https://drafts.csswg.org/css-flexbox/#change-2017-margin-padding-percent
Aktuelle Skillung auf flex-Element Rand: https://drafts.csswg.org/css-flexbox/#item-margins
- Dies ist nun behoben in Firefox 60 - bugzilla.mozilla.org/show_bug.cgi?id=958714
InformationsquelleAutor preaction

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.