CSS горизонтальный прокрутки, но вертикальный стрейч?

Question

Я составляю список маршрутов для рабочих. Каждый рабочий имеет один маршрут, а внутри маршрута - любое количество заказов на работу. В одном маршруте может быть от 1 до 10 маршрутов (что соответствует 1-10 работникам) и до 100 заказов на работу.

Каждый список заказов на работу представляет собой список sortabledivs. Рабочие заказы могут быть перегруппированы по маршруту или перетащены на другой маршрут. У меня есть родительский div, внутри которого все дочерний маршрут divs. Я хочу, чтобы родительский div разрешал показывать маршрут divs в строке по горизонтали. Когда мы набираем 6 или более маршрутов, родительское окно должно прокручиваться по горизонтали и запрещать вторую строку заказов на работу.

Он должен выглядеть следующим образом (R = Маршрут с *, представляющий порядок работы):

R R R R R 
* * * * * 
* * * * * 
* *  * * 
* *  * 
* * 
    * 
    * 

Он должен не выглядеть следующим образом:

R R R 
* * * 
* * * 
* * 
* *  
* * 
    * 
    * 
R R 
* * 
* * 
* * 
* 

Таким образом, маршруты должны быть отображается горизонтально, с полосой прокрутки, если на странице слишком много. НО, родительский div, содержащий эти маршруты, может расти вертикально, чтобы разрешить длительные маршруты, которые имеют много заказов на работу.

Я пробовал добавлять различные стили CSS к родительскому div все безрезультатно. Самое близкое, что я получил, это установить параметр max-height родительскому div, который заставляет горизонтальную прокрутку. Однако это означает, что маршруты обрезаются вертикально, если они слишком длинны.

Любые идеи?

Answer 1

Как CSS-Tricks mentions, лучшим подходом может быть использование таблиц. Проверьте эту скрипку пример:

http://jsfiddle.net/jyz3m7cx/1/

.container { 
    overflow-x: scroll; 
    width: 100%; 
} 

Это также поможет организовать ваши данные, которые, вероятно, будет лучше в ячейках таблицы. Таблицы получают плохой рэп, но определенно используют их.

Другой вариант, который я не рекомендую, заключается в том, чтобы установить ширину внутреннего контейнера. Это будет раздражать, если изменяется ширина, но вы можете установить его с помощью jQuery. Вероятно, это будет больше работы, чем того стоит.