Gli elementi Flex ignorano il riempimento percentuale in Firefox

Question

Sto tentando di aggiungere il riempimento a un elemento all'interno di un 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.

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

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

Chrome:

Firefox:

Modifica: Ciò potrebbe 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

Edit 2: Sì, sembra che la specifica definisce in realtà padding verticale e il margine come dall'essere risolta contro l'altezza del contenitore, in modo forse Chrome è quello non onorare le specifiche? https://drafts.csswg.org/css-flexbox/#item-margins

Answer 1

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

Tabella/Flex Percentuali

• Il gruppo ha cercato di lavorare attraverso il modo verticale percentuale margini e padding sono definiti.
  • Nota: margini superiore e inferiore a CSS hanno tradizionalmente deliberato contro la larghezza blocco che contiene invece del suo altezza, che ha alcuni effetti utili, ma è generalmente sorprendente. Ovviamente le attuali modalità di layout devono continuare con .
  • La precedente risoluzione del gruppo era stata per l'opzione 2 (sotto), ma Google ha ritenuto di avere nuove informazioni sul comportamento di abspos che meritava la riconsiderazione.
  • La discussione è venuto giù a tre possibili soluzioni:
    • Opzione 1: risolvere sempre percentuali contro la larghezza.
    • Opzione 2: risoluzione della griglia e della flessione rispetto all'altezza e gli oggetti asspos si risolvono sempre contro la larghezza.
    • Opzione 3: Grid e flex, compresi gli oggetti assposi, risoluzione rispetto all'altezza. Abspos altrove continuano a risolvere contro la larghezza.
  • In un sondaggio del gruppo è stato abbastanza equamente diviso tra opzioni 1 e 3.
  • Microsoft si opporrebbe a opzione 1 e Google per l'opzione 3, quindi la discussione ha raggiunto una situazione di stallo e sarà continuato privatamente durante la F2F nella speranza di raggiungere una conclusione.

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

Flexbox% Follow-Up

• [...] non vi era ancora alcuna conclusione.

L'attuale Flexbox spec avverte su questo:

margini percentuali e imbottiture su flex items possono essere risolti contro uno:

• proprio asse (sinistra/destra percentuali risolutezza contro larghezza, superiore/inferiore risoluzione contro altezza)
• l'asse in linea (sinistra/destra/alto/bo percentuali di ttom tutte risolvono contro larghezza)

Un utente agente deve scegliere uno di questi due comportamenti.

Nota: Questa varianza fa schifo, ma si coglie con precisione la corrente stato del mondo (nessun consenso tra le implementazioni, e nessun consenso in seno alla CSSWG). È intenzione del CSSWG che i browser convergeranno in uno dei comportamenti, momento in cui le specifiche saranno modificate da per richiederlo.

Gli autori dovrebbero evitare di usare le percentuali di imbottiture o di margini su flex items del tutto, in quanto avranno un comportamento diverso in diversi browser.

Answer 2

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%; 
 
    }

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

Answer 3

Prova questo:

.padded { 
    padding-bottom: 10vw; 
}