Переполнение переполнения div не работает по назначению на мобильном телефоне

Question

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

У меня это работает достаточно хорошо в статической таблице:

HTML

<div id="scalechart"> 
    <div id="buffer"></div> 
    <div id="nochoice"> 
    <img src="http://www.example.com/image1.png" class="leader"> 
    </div> 
    <div id="firstchoice"> 
    <img src="http://www.example.com/image2.png" class="leader"> 
    </div> 
</div> 

CSS

#scalechart { 
    display: block; 
    width: 100%; 
    border: 2px solid grey; 
    height: 500px; 
    background: url(../../legend.png) no-repeat, url(../../Gridlines.png) repeat-x; 
    background-size: contain; 
    clear: both; 
    white-space: nowrap; 
} 

#buffer { 
    width: 144px; 
    position: relative; 
    display: inline-block; 
    height: 100%; 
} 

#nochoice, #firstchoice { 
    display: inline-block; 
    vertical-align: bottom; 
    text-align: center; 
} 

.leader { 
    height: 381px; 
} 

Это работает довольно чертовски хорошо на экранах мобильных устройств за исключением одной вещи:

Граница стола (и фон) появляется только вокруг начальной ширины телефона экран. Другими словами, ширина таблицы не обтекает содержимое ячеек, поэтому, когда пользователь прокручивается в сторону, фон белый, а край края скользит в сторону.

Я считаю, что мой вопрос будет простым: как я могу получить границу стола (и фона), чтобы окружить содержимое ячейки, чтобы пользователь видел линии сетки по всей ширине таблицы?

Указатели оцениваются. Если вы собираетесь голосовать, имейте в виду объяснить, почему. Спасибо.

Answer 1

я пришел к следующему решению:

CSS:

#scalechart { 
    overflow-x: auto; 
    overflow-y: hidden; 
    display: block; 
    width: 100%; 
    border: 2px solid grey; 
    height: 500px; 
    background: url(../../legend.png) no-repeat, url(../../uploads/Transformers/Gridlines.png) repeat-x; 
    clear: both; 
    white-space: nowrap; 
    background-size: contain; 
} 

#nochoice, #firstchoice { 
    display: inline-block; 
    vertical-align: bottom; 
    text-align: center; 
} 

.leader { 
    height: 386px; 
} 

#buffer { 
    width: 130px; 
    position: relative; 
    display: inline-block; 
    height: 100%; 
}