Горизонтальная прокрутка, по ширине контента

У меня есть страница со следующей структурой:

div.wrapper> div.content> div.item+div.item

Обертка имеет ширину 320 пикселей, тогда как два div.itemимеют ширину около 600 пикселей. Мне нужно, чтобы эти два отображались встроенными (прямо сейчас, они display: inline-block;, и чтобы содержимое оболочки прокручивалось горизонтально. Когда я устанавливаю ширину div.contentна auto, она принимает ширину обертки (320px ). Установка ширины на 200%, очевидно, заставляет работать горизонтальную прокрутку, но как заставить div.contentпринимать ширину своего содержимого, чтобы обеспечить горизонтальную прокрутку?

Примечание. :Обертка имеет фиксированную ширину и высоту и имеет overflow-y: hiddenи overflow-x: scrollнаборы, потому что я не хочу, чтобы вертикальная прокрутка --была только горизонтальной.

JSFiddle с примером: http://jsfiddle.net/kh5k7/

Как видите, красные элементы div располагаются вертикально друг над другом.Изменение ширины .contentна 200% (или какое-либо значение )приведет к правильной горизонтальной прокрутке. Я хочу, чтобы это делалось автоматически, потому что я понятия не имею, сколько элементов будет в div .contentзаранее.