CSS: Flexbox und einer Flexbox

Weiß einer von Euch, ob es irgendwo eine Doku gibt, wie Browser das umsetzen? In dem Fall eben Flexbox in Flexbox

Im Grunde vereinfacht ausgedrückt:

<div class="flex-container">
    <div class="flex-child">
        <ul class="flex-container">
            <li class="flex-child">
            <li class="flex-child">
            <li class="flex-child">
        </ul>
    </div>
    
    <div class="flex-child">
        <ul class="flex-container">
            <li class="flex-child">
            <li class="flex-child">
            <li class="flex-child">
        </ul>
    </div>
    
    <div class="flex-child">
        <ul class="flex-container">
            <li class="flex-child">
            <li class="flex-child">
            <li class="flex-child">
        </ul>
    </div>
</div>

Mein Problem dabei, ich bekomme kein einheitliches Layout hin, noch nicht mal zwischen Chrome und Edge, was ja beides "Chromium" ist.

Eigentlich, so war mein Gedanke, sollten die Browser das so anpassen, dass es eben bestmöglich passt. Also die inneren "div" so anpassen, dass eben auch die darin befindlichen "li" am besten einsortiert werden. Scheint aber nicht zu gehen, also nicht so wie gewollt. Die Browser scheinen unterschiedliche Prioritäten zu haben. So wie es ausschaut, will der eine primär erst mal die "li" ausrichten, dann das "div" irgendwie, der andere aber erst die "Divs", dann die "li" irgendwie.

Hat einer eine Idee oder Quelle, wie das Browser machen und wie man denen sagen könnte, was man eigentlich will oder bevorzugt ist?

Es gibt kein wirkliches CSS dazu. Ging ja auch nicht um ausprobieren, sondern ob einer eine Doku kennt, wo das drinnen steht. Also so was wie bei loading="lazy", wo steht, ab welchen Wert geladen wird und eben auch bei welcher Geschwindigkeit.

Das da oben ist quasi nur eine einfache Ansicht gewesen, damit man versteht was ich meine. Im Grunde hätte ich die auch weglassen können. War nur als Beispiel gedacht, weil Flexbox in Flexbox ja vom Prinzip her funktioniert. Nur in den Fällen hat irgendwas eine definierte Größe, was hier in dem Fall nicht so ist. Hier ist alles "auto".

Im Grunde spiele ich eigentlich nur rum und teste eben neue Möglichkeiten. Aber selbst schon ein einfaches Flex ohne definierte Größen ist nicht gleich in FF und Chrome. Ist nur minimal anders, hat aber teils deutliche Auswirkungen. Und in dem Beispiel hier ist nur ein Flex außen rum, die braunen "Regionen" sind die <li> und eben hier einfach "inline-block". Aber selbst da werden die weißen Flex-Childs anders berechnet. Daher meine Frage oben.

Firefox

Chrome

Den Unterschied sieht man besonders in der zweiten Reihe, wobei auch die erste anders ist. Die dritte ist identisch. Der FF muss aber einen Grund haben, warum er Frankreich so breit lässt und nicht Kroatien etwas mehr Raum gibt. Im FF schaut die Höhenaufteilung gleichmäßiger aus, im Chrome aber das Gesamtbild. Bei beiden ist die Breite 755px, also identisch. Aber Kroatien hat im FF 233px, im Chrome 235px. Diese 2 Pixel machen einen deutlichen Unterschied.

Witzigerweise ist es bei Griechenland darüber genau umgedreht, wobei es da aber keinen Sinn macht, denn man hat in Sachen Platz nichts eingespart. Hier ist der FF aber bei 162px, der Chrome nur bei 157px.

Und mein Vorhaben wer nun eben nur, die <li> auch als Flex zu bekommen und dann per "Stretch" zu maximieren, so dass sich die einzelnen Zeilen füllen. Dann verhagelt es aber alles und es wird ganz wirr.

Oh ja, da habe ich ja was zum Lesen. Gerade das hier: "When using flex-flow: column wrap, some browsers do not properly size the container based on its content, and there is unwanted overflow." oder so ähnlich halt hatte ich auch mehrfach. Da wurde die Box "Griechenland" so schmal gemacht, dass "Zentralmakedonien" nicht mehr rein passt. Im Grund war die dann nur noch so breit wie das Bild, der Rest vom Wort stand rechts über.

Oder noch schlimmer, so wie hier:

Oder wie hier. Ist nur ein Flex-Container mit 4 Children. Jeweils 50% breit. Soweit passt das, aber der Text will nicht in der Box bleiben Aber immer nur der eine Buchstabe. Verkleinere ich weiter bricht das Wort um in die nächste Zeile. So lange, bis dann die "4" übersteht und dann auch umbricht. Aber auch nur bei den 50% und nur die rechten. Links die "Wohnküche" hat das auch nicht, die bleibt in ihrem Bereich. Noch kleiner, und er schaltet auf 100%, da ist das Problem dann auch weg.

Aber eine Sache ist mir eben aufgefallen. Denn das Flex-Zeug geht ja an anderen Stellen problemlos, nur hier nun nicht. Die beiden Stellen habe eine Sache gemeinsam: es befindet sich jeweils eine UL darin. Und wenn man sich das mal anschaut, dann scheint der beim Inhalt LI das "margin" zu addieren und der Flex-Container das nicht zu merken. Aber nur bei der UL, oben drüber bei der H3 passt es.

Ist schon verwirrend, wenn man denkt, das wäre einfach... Der Flex-Child selbst passt auch, der hat seine 50% und steht nicht über. Schmeiße ich Flex ganz raus und mache es wieder klassisch mit "float:left, width:50%", dann ist auch wieder alles in Ordnung.

Da haste recht, nicht alles was modern ist ist auch gut, aber Flexbox ist ja schon viele Jahre alt, der Nachfolger ist ja quasi schon da. Vorteile hat es auch, wenn es denn richtig funktioniert. Vor allem so was wie umpositionieren von Bereichen. Also nicht 1 2 3 4, sondern 3 1 2 4. Da kann man sich tot-floaten und es geht dennoch nicht Und ebenso nützlich, die Boxen gehe alle auf die gleiche Höhe. Das Thema hatten wir ja mal mit meiner Bildergalerie. Unterschiedlich große Bilder erzeugen unterschiedlich große Divs und dann sehen die Rahmen fürchterlich aus. Mit Flexbox bleibt das alles schon gleich hoch.

Und letztendlich war Google-Adsense der Auslöser für den zumindest teilweisen Wechsel, denn bei einem zweipaltigen Layout, das auf Float basiert, also links Navi, rechts floatet der Content, dann ist das Mist, wenn Google da ein Ad einbaut, das ein clear:both beinhaltet.

Also die Anordnung sollte ja schon wesentlich anders sein Aber ja, ich verstehe was Du sagen willst. Finde ich schon fast lustig, denn das ist im Grunde mein Grundgedanke und es gibt immer wieder, wenn ich mal nachfrage, wie einer was machen würde, heftigen Widerspruch.

Das da oben, das da so zerschossen ist, das ist nur auf der Startseite. Da ist so gut wie kein User drauf. Es war ein Testlauf, etwas angepasst an die anderen "Große" Mitbewerber, eben weil es von anderen Seiten so als Vorschlag kam.

In meinen normalen LIstenansichten kannste nach alles suchen oder durchklichen, egal ob Land -> Region -> Ort oder eben direkt "Ort" oder "Region" odr "Bundesland" oder oder oder. Da gibt es auch eine Karte, wenn man unentschlossen ist und eben einfach was vielleicht "im Grünen" sucht. Es gibt keine feste Vorgabe, wie die Auswahl erfolgen muss. War auch mein Gedanke, wie gesagt, dass man vielleicht an einen bestimmten Ort will, das Bundesland oder die Region vielleicht aber gar nicht kennt. Bei anderen Portalen geht das nur fest vorgegeben im Sinne von Land -> Bundesland -> Kreis -> Region -> Ort. Genau das wollte ich nicht haben. Aber hier scheiden sich die Geister. Meine Kunden finden es gut. Fast alle SEOs, die einen Review machen, finden es scheiße.

Bei dem letzten Post von "Abakus Forumsfossil" ging es nicht um Flexbox, sondern um die Darstellung allgemein, egal wie. Also darum, wie er was erwartet, wenn er was suchen würde. Ich verstehe ihn, denn so erwarte ich das eigentlich auch. Der Großteil der anderen Programmierer und Webseitenersteller sehen das aber anders. Ich weiß nur, dass ich Kunden habe, denen das gefällt und die sich über andere beschweren. << was nix zu bedeuten hat. Vielleicht bediene ich ja nur die Minderheit. Daher der Testlauf auf der Startseite. Ist aber auch nicht neu, ist da schon 1,5 Jahre, brachte aber nix.

Es ging also um so was wie "komme nach Bertingen".... Und dann sucht man bei "Portal-X" sich deppert, weil man keine Ahnung hat, wo Bertingen eigentlich ist, die aber ein Bundesland und dann einen Landkreis wollen. Bei mir kannste direkt auf Orte zugreifen. Gegenargument: Zu komplex und groß, die Navi. Stimmt auch, da gebe ich recht, die ist echt teils scheiße lang. Kommt drauf an, was man auswählt, aber können schon mal fast 1000 Punkte sein.

Die andere Version, also über feste Vorgaben, die geht natürlich auch. Also erst mal wählen, welche Unterkunft. FeWo, Haus, Hotel. Welches Land, welches Bundesland usw. Nur ich gebe das nicht strickt vor. Man kann bei mir auch sagen "ich will nach Timmendorfer Strand" und dann erst auswählen, ob Wohnung oder Haus. Oder eben ich will an die "Ostsee" und sich dann entscheiden, ob DE, Dänemark oder Polen. Schwierig finde ich das bei anderen Portalen immer, wenn man an den Bodensee möchte. Ehrlich, weil ich damit quasi angefangen habe. Wenn ich an den Bodensee möchte, dann weiß ich wo hin oder eben einfach Bodensee. Bei den meisten anderen Portalen gibt es den Bodensee aber nur in Deutschland, genauer gesagt im Bundesland "BW". Da oft auch noch eingeschränkt auf den "Bodenseekreis", was gar nicht stimmt, denn das ist nur ein kleiner Teil des Deutschen Ufers. Aber auch Regionen in Bayern (West-Allgäu), Österreich (Vorarlberg) und Schweiz (Thurgau) liegen am Bodensee, die sind in deren Listen nicht vertreten.