Angeben der Flexbox-Vergrößerungswerte für die Kreuzgröße

Question

Gibt es einen Mechanismus zum Festlegen von flex * style-Eigenschaften für das Layout auf der Querachse einer Flexbox?

Ich habe ein Layout, bestehend aus zwei horizontal ausgerichteten Kästen mit minimalen Breiten in einer flexiblen Box mit variabler Breite. Wenn der Behälter zu klein wird, um die beiden Boxen zu halten, wird die rechte Box auf den Boden des Containers gewickelt. Das linke Feld behält eine bestimmte Größe bei, bis der Umbruch auftritt. An diesem Punkt wächst es, um die Breite des Containers zu füllen. Ich habe dies mit folgendem CSS erreicht:

#container { 
    display: flex; 
    flex-flow: row wrap; 
    align-items: stretch; 
} 

#left { 
    flex: 1 0 200px; 
} 

#right { 
    flex: 1000 0 200px; 
} 

Durch eine Basis von 200px und eine Schrumpfung von 0 setzen, dies gibt das linke Feld eine minimale Breite von 200 Pixel und durch einen kleinen Zuchtwert im Vergleich zu dem massiven Einstellung eine in der rechten Box, die rechte Box wird den verbleibenden Platz füllen und die linke wird sich im Grunde nicht ändern. Ich ordne die Zahlen auf diese Weise an, denn wenn der Container kleiner als 400 px ist, wird die rechte Box in die untere Hälfte des Containers umgebrochen, zu diesem Zeitpunkt ist der Wachstumswert der linken Box unbestätigt und wächst auf die volle Größe des Containers.

Das Problem, das ich habe, ist mit den resultierenden Größen auf der Querachse. Wenn das rechte Feld mit Inhalt gefüllt ist, beginnt es den Container zu überlaufen, wenn ich es stattdessen zu scrollen brauche. Das Beste, was ich hier zu tun vermag, ist ein Überlauf-y auf dem Container, der den gesamten Container einschließlich der linken Box scrollt. Das Festlegen einer maximalen Höhe von 100% ist immer noch relativ zur gesamten Höhe des Containers. Wenn Sie einen anderen Wert für die Höhe festlegen, wirkt sich dies auf die Höhe der Box aus, wenn sie nicht umgeschlagen wird.

Sie können den Effekt bei this fiddle sehen. Wenn der Behälter weniger als 400 px ist, wird die blaue Box umwickelt. Die blaue Box hat eine Mindesthöhe von 200px, also erfüllt sie diese und dann strecken sich die beiden Boxen, um die verbleibende vertikale Höhe zu füllen. Wenn Sie jedoch auf genug klicken, beginnt das blaue Feld zu überlaufen und kann nicht von einem Überlauf-y enthalten sein, da es keinen endgültigen Höhenwert gibt.

Wesentlichen, was ich will, ist die gleichen Werte in den Flex-Einstellungen, sondern auch für die Querachse:

#left { 
    cross: 1000 0 auto; 
} 

#right { 
    cross: 1 0 200px; 
} 

diese Weise können sie beide strecken den vertikalen Raum zu füllen, wenn es keine Wrap ist, aber wenn die Umhüllung auftritt Die rechte Box erhält eine Höhe von 200px und die linke Box füllt den verbleibenden vertikalen Platz. Gibt es eine Möglichkeit, diesen Effekt zu erzielen, da die oben genannte Eigenschaft nicht existiert?

Answer 1

Wie Sie wissen, wollen Sie das andere Verhalten, wenn unter 400px Sie könnten einfach ein Media-Tag verwenden, um die Richtung des Flex-Flow zu ändern. Dann können Sie die normale Flex-Eigenschaft verwenden, um Ihre Werte festzulegen.

@media (max-width: 399px) { 
    body { 
    flex-direction: column; 
    } 

    #left { 
    cross: 1000 0 auto; 
    } 

    #right { 
    cross: 1 0 200px; 
    overflow: auto; 
    } 
} 

Unrelated mit dieser Antwort, aber eine gute Hilfe, wenn auf welche flex Eigenschaften mit Flexbox Problemen und Fragen zu tun, die es gibt „A Complete Guide to Flexbox“ bu CSS-Tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/