Gli elementi Flex ignorano il riempimento percentuale in Firefox

Sto cercando di aggiungere padding a un elemento all’interno di un display:flex elemento display:flex . Quando il padding è definito come percentuale, non viene visualizzato in Firefox, sebbene lo faccia quando definito in px . Entrambi i casi funzionano come previsto in Chrome.

Cromo:

cromo

Firefox:

Firefox

Modifica : questo può essere dovuto alla decisione di Mozilla di interpretare percentuali verticali rispetto all’altezza del contenitore genitore. Sembra pazzo per me. https://bugzilla.mozilla.org/show_bug.cgi?id=851379

Modifica 2 : Sì, sembra che la specifica in realtà definisca il riempimento e il margine verticali come risolti rispetto all’altezza del contenitore, quindi forse Chrome è quello che non onora le specifiche? https://drafts.csswg.org/css-flexbox/#item-margins

Solutions Collecting From Web of "Gli elementi Flex ignorano il riempimento percentuale in Firefox"

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

Grid / Flex percentuali

  • Il gruppo ha cercato di capire come vengono definiti i margini percentuali verticali e i paddings.
    • Nota: i margini superiore e inferiore in CSS sono tradizionalmente risolti rispetto alla larghezza del blocco contenitore anziché all’altezza, il che ha alcuni effetti utili ma è generalmente sorprendente. Le modalità di layout esistenti devono ovviamente continuare a farlo.
    • La precedente risoluzione del gruppo era stata per l’opzione 2 (sotto), ma Google ha ritenuto di avere nuove informazioni sul comportamento degli asspos che meritavano di essere riconsiderate.
    • La discussione è arrivata a tre potenziali soluzioni:
      • Opzione 1: Risolvi sempre le percentuali rispetto alla larghezza.
      • Opzione 2: Grid e flex si risolvono contro l’altezza e gli oggetti abspos si risolvono sempre contro la larghezza.
      • Opzione 3: Grid e flex, inclusi gli oggetti asspos, si scontrano con l’altezza. Le assenze altrove continuano a risolversi contro la larghezza.
    • In un sondaggio di paglia il gruppo è stato diviso in modo abbastanza uniforms tra le opzioni 1 e 3.
    • Microsoft obietterà all’opzione 1 e Google all’opzione 3, quindi la discussione ha raggiunto un punto morto e sarà proseguita privatamente durante la F2F nella speranza di giungere a una conclusione.

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

Flexbox% Follow-Up

  • […] non c’era ancora una conclusione.

Le attuali specifiche Flexbox avvisano su questo:

I margini percentuali e i paddings sugli elementi flessibili possono essere risolti con entrambi:

  • il proprio asse (le percentuali sinistra / destra si risolvono contro la larghezza, la risoluzione superiore / inferiore rispetto all’altezza)
  • l’asse in linea (le percentuali sinistra / destra / superiore / inferiore si risolvono tutte contro la larghezza)

Un agente utente deve scegliere uno di questi due comportamenti.

Nota: questa varianza fa schifo, ma cattura esattamente lo stato attuale del mondo (nessun consenso tra le implementazioni e nessun consenso all’interno del CSSWG). È intenzione del CSSWG che i browser convergeranno su uno dei comportamenti, momento in cui le specifiche verranno modificate per richiedere ciò.

Gli autori dovrebbero evitare di utilizzare interamente percentuali di paddings o margini sugli articoli flex , in quanto avranno comportamenti diversi nei vari browser.

Tuttavia, più recentemente il WG dei CSS ha risolto (con alcune controversie ):

Sia gli elementi della barra multifunzione che quelli della griglia superiore e inferiore e la percentuale di riempimento si risolvono rispetto alla direzione in linea disponibile.

Vedi la bozza del redattore aggiornato.

Per me questo è il trucco: aggiungere display: tabella al div. Non so se questo causi altri problemi.

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

Prova questo:

 .padded { padding-bottom: 10vw; } 

L’attuale bozza delle specifiche dice

I margini percentuali e i paddings sugli elementi flessibili, come quelli sulle caselle di blocco, vengono risolti rispetto alle dimensioni in linea del blocco contenitore, ad es. Le percentuali sinistra / destra / superiore / inferiore si risolvono contro la larghezza del blocco contenitore nelle modalità di scrittura orizzontale.

Quindi, Firefox è ora errato secondo l’ultima bozza.

Discussione CSSWG: https://github.com/w3c/csswg-drafts/issues/2085 Spec changelog reference: https://drafts.csswg.org/css-flexbox/#change-2017-margin-padding-percent Specifiche attuali sui margini degli elementi flessibili: https://drafts.csswg.org/css-flexbox/#item-margins