HTML/CSS: I need the following layout, primarily (idea) window-filling, but should work also as content of a resizable div.
fixed height by content |
fixed width by content | variable height/width resizable by surrounding container size | fixed width by content |
fixed height by content |
The scrollbars at the center rectangle shall be "auto" on "overflow".
Everything works fine with "display:table; table-layout:fixed" (in a bit complicated construct, which I found after long research), but it works only in Chrome and Opera. In IE and Firefox the vertical scrollbar appears at the right of the surrounding window/block, not at the center's rectangle. [ !Attention!: The wanted scrollbars in the above (manually wired) view are not visible in Firefox ]
Please have a look at that construct at Fiddle (
https://jsfiddle.net/44ntbusb/ ) and play with the size of the result window in different browsers, watching the scrollbars.
Apparently in IE and FF the center rectangle doesn't shrink below content height.
In fact, such a (logically primitive) base layout would apply to many applications.
I am very frustrated, because I didn't find a precise cross-browser solution until now - I guess, the difficulties arise from the flow-paradigm (versus window-paradigm) of HTML, but the problem SHOULD be solvable anyhow.
Please help. Many thanks in advance...