div #rahmen class clearfix
div #contentklammer-fest float:left
div #inhalt class clearfix
div #breadcrumb
div #content float:left
div #fuss-inhalt01
div #fuss-inhalt02
div #flexbox float:left
div class flexinhalt
ohne float
div class flexinhalt
ohne float
div class flexinhalt
ohne float
div class flexinhalt
ohne float
Abb. 1: zweite Spalte umschließende Flexbox mit float - Flexinhaltboxen ohne float.
Bei geringerer Auflösung verschiebt sich die Flexbox nach unten und zeigt ihre Flexinhaltsboxen weiterhin vertikal an, logisch.
Die Flexinhaltsboxen sollen aber im Falle des Herunterrutschens vertikal angezeigt werden.
Also versehe ich die Flexinhaltsboxen ebenfalls mit einem float:left - siehe die nächste Abbildung 2
Abb. 2: Ich habe also die Flexinhaltsboxen ebenfalls mit einem float:left versehen.
Im IE > 6 ist nun alles wie gewünscht.
Aber nicht in allen anderen gängigen Browsern. Dort rutscht nun die gesamte Flexbox ohne Not bezüglich der verfügbaren Gesamtbreite sofort nach unten. Das ist oberdoof.
Abb. 3: Lösung: Hier habe ich aus der umschließenden Flexbox das float herausgenommen. Und schon klappt es mit dem Nachbarn :-) und in allen Browsern.
Außer: IE! der benötigt das float (der macht mal wieder alles anders als die anderen :-)
Ach ja, damit die floatenden Flexinhaltsboxen bei hoher Bildschirmauflösung in der rechten Spalte hübsch untereinander stehen, habe ich dem Außenrahmen ein max-width verpasst.