I have created a reduced test case for the problem I am seeing:
http://codepen.io/benfrain/pen/anDmL
I want to create a horizontally scrollable area that is the correct width for whatever contents gets inserted there without using JS. Making the first children inline largely solves the issue. However:
Viewing that link on Chrome/Safari the layout behaves as expected (by me at least). Each box is laid out linearly created a horizontally scrollable area.
However, Firefox (v22) and Opera (v12.16) don't - they stack each box one under the other and don't create the horizontally scrollable area.
Which implementation is correct and is there any way (CSS only of getting both to perform the same way)?