Kolomlayout gaat kapot met display-table

[incaz]

Een voorbeeld zegt meer dan 1000 woorden:
http://jsfiddle.net/0epr4w7c/

Dit is een klassieke 'holy grail'-layout, met eerst de content en een fixed width linkerkolom. (Dat wordt ineens weer een stuk meer te waarderen als je te maken hebt met haperende wifi.)

Het probleem: de content bestaat uit iets dat wordt weergegeven als een tabel, die onder bepaalde omstandigheden breder wordt dan de ruimte die er is. Dit is vooraf niet te voorspellen.
En dat geeft interessante effecten, waarbij de linkerkolom van z'n plek schuift en over de content heenvalt. Dat wil ik dus niet. Het liefst wil ik dat de te brede informatie gewoon buiten beeld valt, te bereiken met een scrollbalk op de hele pagina (niet een wrapperdiv) en dat verder alles op z'n plek blijft staan. Maar hoe?

Ook alternatieven zijn welkom, maar

- een position: absolute; op de linkerkolom maakt dat als de linkerkolom meer gegevens bevat dan de content, deze content buiten beeld valt. Dit komt regelmatig voor.
- idem voor de contentkolom.
- flex-ordering is niet helemaal betrouwbaar vziw, maar maakt ook de kolommen gelijk in breedte en dat is niet de bedoeling

Iemand?

[Gamebuster]

Heb je hier iets aan?

http://jsfiddle.net/bf3dL4sc/

Een fixed scrollbare sidebar met flexibele scrollbare content. Werkt soepel op mobieltjes, tables en desktops. Vanmiddag mee gespeeld. Als bonus, een fullscreen tabel met fixed table headers.

[ Voor 4% gewijzigd door Gamebuster op 11-10-2014 23:51 ]

[incaz]

Gamebuster: nee want de sidebar komt in de html-source voor de content. (Bovendien hou ik niet van fixed - en wat als je sidebar langer is dan de hoogte van het scherm?)