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. Das habe ich mit folgendem CSS erreicht:
%Vor%Wenn Sie eine Basis von 200px und eine Schrumpfung von 0 festlegen, gibt dies der linken Box eine Mindestbreite von 200px, und indem Sie einen kleinen Grow-Wert gegenüber der massiven in der rechten Box setzen, füllt die rechte Box den verbleibenden Platz und der 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.
Ihr könnt den Effekt bei dieser Geige sehen. Wenn der Behälter weniger als 400 px ist, wird die blaue Box umwickelt. Die blaue Box hat eine minimale Hö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 die blaue Box zu überlaufen und kann nicht von einem Überlauf-y enthalten sein, da es keinen definitiven Höhenwert gibt.
Im Wesentlichen sind die gleichen Werte in den Flex-Einstellungen, aber für die Querachse:
%Vor%Auf diese Weise dehnen sie sich beide, um den vertikalen Raum zu füllen, wenn kein Umbruch stattfindet, aber wenn der Umbruch erfolgt, erhält die rechte Box eine Höhe von 200px und die linke Box füllt den verbleibenden vertikalen Platz. Gibt es eine Möglichkeit, diesen Effekt zu erreichen, da die obige Eigenschaft nicht existiert?
Wie Sie wissen, wollen Sie das andere Verhalten, wenn Sie unter 400px sind, können Sie einfach ein Media-Tag verwenden, um die Richtung des Flex-Flusses zu ändern. Dann können Sie die normale flex-Eigenschaft verwenden, um Ihre Werte festzulegen.
%Vor%Nicht mit dieser Antwort verbunden, aber eine gute Hilfe beim Umgang mit Flexbox-Problemen und Fragen, welche Flex-Eigenschaften existieren, ist ein "A Complete Guide to Flexbox" bu CSS-Tricks Ссылка