div larghezza cambia in modo diverso in Firefox vs Chrome dopo il ridimensionamento del viewport

Ho notato una piccola differenza dopo aver ridotto la finestra con un layout basato su contenitori Flexbox. Il seguente snippet contiene alcuni collegamenti all'interno di due contenitori (.container e .subcontainer). In Chrome (45 beta), i div con classe element hanno la stessa larghezza indipendentemente dalla dimensione del viewport. Tuttavia, in Firefox (40), la larghezza di ogni div cambia a seconda del suo contenuto.div larghezza cambia in modo diverso in Firefox vs Chrome dopo il ridimensionamento del viewport

html, 
 
    body { 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .container { 
 
    position: relative; 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 50%; 
 
    } 
 
    .element { 
 
    flex: 1 0 0; 
 
    padding: 0.5em; 
 
    text-align: center; 
 
    position: relative; 
 
    background-color: red; 
 
    margin-right: 1em; 
 
    } 
 
    .subcontainer { 
 
    flex: 0 1 auto; 
 
    display: flex; 
 
    } 
 
    .element a { 
 
    color: black; 
 
    }

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="subcontainer"> 
 
     <div class="element"><a>abc</a> 
 
     </div> 
 
     <div class="element"><a>abcdef</a> 
 
     </div> 
 
     <div class="element"><a>abcdef</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

credo che la funzionalità "Codice Run frammento di" non permette di vedere questo cambiamento, in modo da fornire un paio di gif che mostrano la differenza:

Chrome:

Firefox:

Come si può vedere, le caselle condividono la stessa larghezza in Chrome, ma Firefox costringe la prima casella abbastanza sensibilmente e le altre caselle di mantenere le proporzioni. Qual è la ragione di questa discrepanza e come posso risolverlo? Mi piacerebbe avere la stessa larghezza per ogni scatola. Questo era lo scopo dell'uso di flex: 1 0 0 in primo luogo.

Grazie

fonte

2015-08-14 Robert Smith

Cosa intendi per "non ti consente di vedere il cambiamento"? Ho Fx40 e non vedo il problema catturato nel tuo screenshot quando eseguo lo snippet. – klaar

Sì. Mi riferivo alla funzione "Esegui snippet di codice" qui in SO (non ti permette di ridurre le dimensioni del tuo browser senza generare barre di scorrimento) Tuttavia, se stai usando il frammento di codice HTML in un'altra finestra, devi ridimensionare il tuo browser un po 'per vedere la differenza. Ad un certo punto, Firefox cambia la larghezza di ogni div a seconda del contenuto. –

tenta di impostare min-width a qualsiasi valore è necessario, o semplicemente 0px:

.element 
{ 
    ... 
    min-width: 0px; 
}

Fiddle

dettagli

Per gli elementi di flessione Firefox è min-width:min-content di default , come indicato here

Queste implementazioni in cui l'attuazione di un comportamento leggermente più semplice per questa parola chiave: è calcolato a min-contenuto di elementi flessibili, e si calcola a 0 su tutto il resto.

Quindi, se abbiamo impostato min-width:-webkit-min-content per Chrome, avrà lo stesso comportamento indesiderato - jsfiddle.

fonte

2015-08-16 08:42:17

Interessante. Funziona. Grazie. Sai perché min-width: 0px; risolve questo problema? –

@RobertSmith, ho aggiunto dettagli alla mia risposta –

Si potrebbe scrivere 'min-width: 0', senza' px'. –

div larghezza cambia in modo diverso in Firefox vs Chrome dopo il ridimensionamento del viewport

risposta

Problemi correlati