problemi di rendering utilizzando FlexBox in Firefox e Chrome 48

su Chrome 47 (comportamento corretto): su Chrome 47, che div con .scroll scorre correttamente, prendendo altezza 100% utilizzando flex.problemi di rendering utilizzando FlexBox in Firefox e Chrome 48

su Firefox (comportamento sbagliato): Mentre su firefox, che div con .scroll sta usando l'altezza del contenuto e non lo scorrimento correttamente.

Qual è la soluzione cross-browser per questo problema?

http://jsfiddle.net/d4nkevee/

for (var i = 0; i < 100; i++) 
 
    $(".scroll").append("Dynamic content<br>");

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.content { 
 
    background: yellow; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.scroll { 
 
    flex: 1 1 auto; 
 
    overflow: scroll; 
 
}

<div class="container"> 
 
    
 
    <div class="bar">Small</div> 
 
    
 
    <div class="content"> 
 
    
 
    <div>Static content</div> 
 
    <div class="scroll"></div> 
 
    <div>Static content</div> 
 
    
 
    </div> 
 
    
 
    <div class="footer">Small</div> 
 
    
 
</div>

domanda aggiornato di distinguere tra Chrome e Chrome 47 48.

fonte

2016-01-24 Richard

Il comportamento standard è uno di Firefox. E l'ultimo Chromium si comporta anche in questo modo. – Oriol

Grazie per averlo detto! Considerando che è un duplicato, dovrei rimuovere questa [email protected] – Richard

Duplica significa semplicemente che la domanda è chiusa a nuove risposte. È comunque buono da conservare a scopo di ricerca, poiché potrebbe contenere parole chiave non presenti nel duplicato. –

La specifica FlexBox è stato aggiornato rendendo la dimensione minima predefinita di flex articoli uguali alla dimensione del contenuto: min-width: auto/min-height: auto.

È possibile sostituire questa impostazione con min-width: 0/min-height: 0:

.content { 
    background: yellow; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 

    min-height: 0;   /* NEW */ 
    min-width: 0;   /* NEW */ 
}

http://jsfiddle.net/d4nkevee/1/

Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

Ecco alcuni dettagli dalla spec:

4.5. Implied Minimum Size of Flex Items

Per fornire una dimensione minima predefinita più ragionevole per gli elementi flessibili, questa specifica introduce un nuovo auto valore come il valore iniziale proprietà min-width e min-height definito nei CSS 2.1. (read more)

UPDATE

Sembra che Chrome ha aggiornato il suo comportamento di rendering. Chrome 48 ora emula Firefox in termini di ridimensionamento minimo della flessibilità.

Sulla base di rapporti nei seguenti collegamenti, la soluzione sopra dovrebbe funzionare anche in Chrome 48.

fonte

2016-01-24 23:29:03

Sapevo che questa comunità mi avrebbe aiutato a risolvere questo insetto inspiegabile. Grazie mille. Ha funzionato qui come un fascino! – Richard

@Michael_B Per curiosità, come si fa a trovare un bug come questo? L'hai visto prima di questa domanda? Crea dieci JSFiddles finché non trovi la causa? Corrompere un indovino? –

@LeonAdler, cercando in profondità in google utilizzando varie parole chiave poi, se necessario, seguendo i link nelle pagine che trovi, fino a quando non arrivi a destinazione (se esiste anche). Essere un web crawler umano ;-) –

problemi di rendering utilizzando FlexBox in Firefox e Chrome 48

risposta

Problemi correlati