Wie verhindert man, dass Inhalte die Größe eines Flex-Elements ändern?

Question

Ich verwende CSS Flexbox, um ein skalierbares, reaktionsfähiges Raster zu erstellen. Wenn Sie ein Google-Diagramm auf eines der flexbox-Objekte anwenden, ändert sich die Größe des Elements geringfügig. Es ist genug, um das Gitter aus der Ausrichtung zu werfen. Ich stelle die folgenden Bilder zusammen, um das Problem zu veranschaulichen.

Flexbox Gitter vor dem 6. Google Chart Punkt Anwendung:

Flexbox Gitter nach 6 Google Chart-Punkt Anwendung:

Die Flexbox Netzbelastung schneller als die Google Diagramm, so dass das Raster ursprünglich korrekt geladen wird. Wenn das Diagramm jedoch geladen wird, wird Punkt 6 leicht erweitert, was Bild 2 oben verursacht.

Die mittlere Spalte flex Behälter und Punkt 6 div sind Setup in CSS wie folgt:

#middlecolumn { 
    width: 75%; 
    height: 100%; 
    display: flex; 
    flex-flow: column; 
    margin: 0.25%; 
} 

#item6_div { 
    flex: 3; 
    margin-top: 0.8vh; 
} 

Beachten Sie, dass Artikel 5 und 7 Setup in CSS die gleiche Art und Weise sind, mit flex Werte von 1. I.e. Element 6 ist das 3-fache der Höhe der Elemente 5 und 7. Wenn Größe 6 geändert wird, wird das 3: 1-Verhältnis beibehalten.

Gibt es etwas, das ich in CSS vermisse, um zu verhindern, dass der Google-Chart die Größe seines Flexbox-Containers ändert?

Answer 1

Wenn Sie ein Flex-Artikel sagen zu flex: 3 (Punkt 6) oder flex: 1 (Artikel 5 & 7), hier ist, wie die Kurzschrift-Eigenschaft bricht:

flex: ? = <flex-grow>, <flex-shrink>, <flex-basis> 

flex: 3 = flex-grow: 3, flex-shrink: 1, flex-basis: 0 

flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0 

In beiden Fällen ist der flex-shrink Faktor 1 ist, Das bedeutet, dass der Flex-Gegenstand proportional schrumpfen darf.

flex: 3 0 0; 
flex: 1 0 0; 

Weitere Details im Flexbox:

Um die Flex-Elemente aus schrumpfen, zu verhindern, die die Fehlausrichtung verursacht werden kann, würde ich den flex-shrink auf 0

Statt flex: 3 und flex: 1 Versuch ändern spezifikation: 7.1.1. Basic Values of flex

---

Aber Sie können ein anderes Problem haben. Sie schrieb:

Beachten Sie, dass Artikel 5 und 7 Setup sind die gleiche Weise in CSS, mit flex Werte von 1. I.e. Element 6 ist das 3-fache der Höhe der Elemente 5 und 7. Wenn Größe 6 geändert wird, wird das 3: 1-Verhältnis beibehalten.

Dies ist nicht, wie die flex-grow Eigenschaft funktioniert.

Durch Anwenden von flex-grow: 3 auf ein Flex-Element geben Sie an, dass es dreimal mehr verfügbaren Speicherplatz als Flex-Elemente mit flex-grow: 1 verbrauchen soll. Dies bedeutet nicht notwendigerweise, dass Artikel 6 dreimal so groß ist wie Artikel 5 und 7.

Erfahren Sie mehr darüber, wie flex-grow arbeitet hier: flex-grow not sizing flex items as expected

Als Alternative Dimensionierungsverfahren wird möglicherweise die flex-basis Eigenschaft verwenden möchten. Versuchen Sie flex: 0 0 60% auf Artikel 6 und flex: 0 0 20% auf Artikel 5 und 7.