[CSS] Flexbox width automatisch anpassen in overflow-container

[adistoe]

Hallo

Ich habe in einem div (max-width: 100%) einen overflow-container. Darin sind zwei flex-container. In meinem Beispiel sind die beiden flex-container fast identisch. Beim zweiten flex-container ist zusätzlich für jedes flex-item die Eigenschaft min-width auf 300px gesetzt.
Dadurch ist der zweite Container breiter, als der Erste.

Mein Problem ist nun, dass der erste flex-container nicht automatisch mitwächst.
Ich möchte aber, dass beide flex-container die selbe Breite haben.
Der erste flex-container soll die Breite des zweiten flex-containers annehmen, aber ohne dass die min-width auch auf 300px gesetzt werden muss.
Bestenfalls sollte das Ganze nur mit CSS umgesetzt werden, ohne JS.

JSFiddle:

Ich hoffe, ich konnte mein Problem verständlich beschreiben.

Danke für eure Hilfe!
adistoe


#Edit:
Ich glaube, das Problem ist, dass die 100% width vom flex-container auf den parent bezogen werden, aber den overflow nicht einrechnen. Ist es möglich, den overflow einzurechnen? Da die flex-container eine dynamische Breite haben und der Inhalt variieren kann, kann ich leider nicht sagen, um wie viel der container breiter werden muss.

[JustinMind]

Hi adistoe,
eventuell hilft dir folgende Quelle weiter: .
Eine wirklich super erklärende und übersichtliche Website.

[adistoe]

Hallo JustinMind

Diese Seite ist mir bekannt.
Leider wird mein Problem dort nicht aufgeführt, aber danke trotzdem

Das Problem ist ja eigentlich gar nicht die flexbox, sondern die Breite des flex-containers, da diese 100% vom parent annimmt, aber nicht mit dem overflow wächst.

[JustinMind]

Noch hängt es bei mir mit dem Verständnis, denn beide, übereinander angeordnete Container, passen sich der vollen Breite an. Erst ab einer Auflösung unter 1500px, schiebt sich der untere (zweite) Container aus dem Fenster.
Bei allen größeren Auflösungen sind beide Container identisch breit.
Sehen wir beide das gleiche?
Hast du es in verschiedenen Browser berücksichtigt => Haben wir es hier mit keinen Browser-Inkompatibilitäten zutun?
Wenn ja, kannst du noch gezielter aufdröseln, was nicht passt? Ich sehe leider immer noch nicht dein Anliegen.

[False]

Originally Posted by JustinMind

Noch hängt es bei mir mit dem Verständnis, denn beide, übereinander angeordnete Container, passen sich der vollen Breite an. Erst ab einer Auflösung unter 1500px, schiebt sich der untere (zweite) Container aus dem Fenster.
Bei allen größeren Auflösungen sind beide Container identisch breit.
Sehen wir beide das gleiche?
Hast du es in verschiedenen Browser berücksichtigt => Haben wir es hier mit keinen Browser-Inkompatibilitäten zutun?
Wenn ja, kannst du noch gezielter aufdröseln, was nicht passt? Ich sehe leider immer noch nicht dein Anliegen.

Kann ich nur bestätigen!
Dadurch das der Zweite Container eine min-width von 300px hat und es 5 Elemente gibt hast du eine min-width von 1500px.
Somit Ist der Zweite Container solange Größer bis die Seite/Der Browser eine Breite von 1500px erreicht hat.

Wenn du willst das die immer gleich Breit sind musst du entweder das min-width attribut entfernen oder beim ersten Container das Attribute auch hinzufügen.

Solltest du ein anderes Problem haben und wir reden aneinander vorbei beschreib dein Problem genauer.

[adistoe]

Anscheinend haben wir eine andere Ansicht auf jsFiddle. Ich habe nur knapp 1/2 der Breite für die Ansicht.

So zumindest sieht der Preview-Teil bei mir aus:


Ich habe extra den unteren Container markiert, damit mein Problem besser ersichtlich ist. Der Content von "flex-container-bigger" geht über den div hinaus und ich möchte, dass der div mitwächst.
Ich habe die min-width nochmal erhöht, um das Problem besser darzustellen.
jsFiddle:

Mittlerweile konnte ich dieses Problem aber selbst lösen indem ich direkt auf den flex-container die min-width auf min-content setze:

min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;

Nun möchte ich eigentlich noch, dass der erste Container die selbe Breite annimmt, wie der zweite. Ich denke aber, dass dies nur mit CSS nicht möglich ist (?) und ich damit doch auf JS zurückgreifen muss, indem ich die Breite des unteren Containers auf den oberen Container anwende.

Originally Posted by .ƒaℓsє.

Wenn du willst das die immer gleich Breit sind musst du entweder das min-width attribut entfernen oder beim ersten Container das Attribute auch hinzufügen.

Hier nochmal ein Beispiel:
Das erste Beispiel war etwas ungünstig gewählt, tut mir Leid.

Jetzt haben alle Elemente die Mindestbreite 50px. Der untere Container hat aber so viele Items, dass wegen der min-width die Seitenbreite überschritten wird. Der obere Container wird aber nicht breiter und ist damit nun kleiner als der untere Container.

#Edit:
jsFiddle für die JavaScript Lösung:
Wenn das jetzt ohne JS und nur mit CSS möglich ist, wäre das super.

[JustinMind]

Ah ok, ich verstehe. Erst durch dein 2. Beispiel wurde mir dein Problem ersichtlich.
Was für einen Anwendungsfall möchtest du denn damit realisieren?

Einen Header (oben) und eine Navigation, seitlich scrollbar unten oder der gleichen?

[adistoe]

Eine solche Datumsanzeige soll das schlussendlich werden:


Und wenn zu viele Tage anzuzeigen sind oder der Bildschirm zu schmal wird (wodurch nur die Tage zu breit sind und somit den Overflow generieren), dann soll eine horizontale Scrollbar erscheinen. Und da die flex-items ihre Grösse per flex-grow erhalten, müssen die drei Container (Monate, KWs, Tage) die selbe Breite haben, da ansonsten die Wochen und Monate verschoben werden und das ganze nicht mehr stimmt.

[type.]

Kurze Zwischenfrage: Wieso löst du dein Problem nicht mit Grid? Das würde das Ganze wahrscheinlich ein wenig einfacher machen und du hättest auch nicht das Problem, dass u.U. deine Kalenderwochen nicht ganz zu den Tagen passen, was die Border angeht?

Für Flex fällt mir leider auf Anhieb auch keine Lösung ein.. :c

[adistoe]

Originally Posted by type.

Wieso löst du dein Problem nicht mit Grid?

Das CSS Grid habe ich mir noch gar nicht wirklich angeschaut.
Aber ich werde es mir sicher mal ansehen, vielleicht wird ja was daraus

[JustinMind]

Ja CSS-Grid ist eine Option. Generell sollte man im Hinterkopf behalten,
wann man welches Features nutzen möchte.
Dazu gibt es einen schönen Beitrag

Es bezieht sich lediglich nur auf das Allgemeine, keine Frameworks,
wie z.B.: A (die Flex-box nochmals erweitern) werden berücksichtigt.