У меня есть такой макет:
<div class="mainContent" style="overflow-y: scroll !important; width: 100%">
<div class="leftPanel" style="overflow: hidden; width: 225px;">
</div>
<div class="rightPanel" style="overflow: hidden;">
<div class="dataPanel" style="width:21355px; height:3253px;">
<div class="topPanel" style="position:fixed; width:21355px;">
</div>
<div class="bottomPanel">
</div>
</div>
</div>
</div>
Верхняя панель должна находиться в фиксированном положении, чтобы она не прокручивалась вертикально (ось y) с остальными данными, содержащимися в mainContent, но topPanel также должна оставаться в пределах rightPanel вдоль оси x. Я попытался использовать overflow-x: скрытый на каждом внешнем div, но из-за наличия позиции: исправлено на topPanel, он игнорирует этот атрибут.
Я искал некоторое время, и самое близкое решение, которое я нашел, это использовать:
clip: rect(0px 750px 900px 0px);
который перекрывал бы переполнение topPanel вдоль оси x, но если пользователь прокручивается влево или вправо (что они будут делать), его нужно будет перенастроить каждый раз, что не кажется правдоподобным решением.
Смотрите здесь скрипку. Обратите внимание на "Верх", который переполняется справа от всех контейнеров div.
Я думаю, проблема заключается в том, что вы используете позицию: fixed; когда вы используете фиксированное позиционирование, вы берете элемент из обычного потока документа и привязываете его к определенной области. После этого атрибуты переполнения больше не применяются. В приведенном ниже примере я использовал свойства "right" и "left" для блокировки сторон "верхнего" div и удаления "width". Очевидно, вам придется настроить эти значения в соответствии с вашими потребностями, но это направление, в котором я бы пошел.
topPanel
{
position: fixed;
right: 10px;
left: 250px;
border: solid 4px purple;
}