Ich bemerkte einen kleinen Unterschied nach dem Reduzieren des Ansichtsfensters mit einem Layout auf Flexbox-Container basiert. Das folgende Snippet enthält einige Links in zwei Containern (.container und .subcontainer). In Chrome (45 Beta) haben die divs mit der Klasse element unabhängig von der Größe des Ansichtsfensters die gleiche Breite. In Firefox (40) ändert sich jedoch die Breite jedes Divs je nach Inhalt.div Breite ändert sich anders in Firefox vs Chrome nach der Größenanpassung 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>Ich denke, die "Run-Code-Snippet" Funktionalität nicht diese Änderung zu sehen erlaubt, so biete ich ein paar Gifs den Unterschied zeigt:
Chrome:
Firefox:
Wie Sie sehen können, teilen sich die Boxen die gleiche Breite in Chrome, aber Firefox schränkt das erste Feld ganz deutlich und die anderen Boxen behalten ihre Proportionen. Was ist der Grund für diese Diskrepanz und wie kann ich das beheben? Ich hätte gerne die gleiche Breite für jede Box. Das war der Zweck der Verwendung von flex: 1 0 0 an erster Stelle.
Dank
Was meinst du, "erlaubt dir nicht, die Veränderung zu sehen"? Ich habe Fx40 und sehe das Problem nicht in Ihrem Screenshot, wenn Sie das Snippet ausführen. – klaar
Ja. Ich bezog mich auf die Funktion "Code-Snippet ausführen" hier in SO (es erlaubt Ihnen nicht, die Größe Ihres Browsers zu reduzieren, ohne Bildlaufleisten zu erzeugen). Wenn Sie jedoch das HTML-Snippet in einem anderen Fenster verwenden, müssen Sie Ihre Größe ändern Browser viel, um den Unterschied zu sehen. Irgendwann ändert Firefox die Breite jedes Divs abhängig vom Inhalt. –