Javascript 固定定位重叠问题

我和这件事有点纠结。我有一个2个容器的布局。其中一个容器表示一个地图（#main），需要始终保持在用户视图中，另一个容器（#sub）用作可滚动的内容。如果内容水平匹配，一切看起来都很好。然而，一旦出现水平条（调整窗口大小以进行复制），可滚动内容就会与固定内容重叠，我不知道如何修复它。我知道有一种方法可以修复它，那就是绝对定位固定内容，并使用javascript从顶部调整其位置。有没有办法解决这个问题

示例代码如下：

Html:

<div id="content">
    <div id="main">main</div>
    <div id="sub">
        <strong>Sub</strong><br />
        sub<br />
        sub<br />
        sub
    </div>
</div>

#content {
    width: 1200px;
    margin: 0 auto;
}
#main {
    position: fixed;
    width: 849px;
    height: 500px;
    background: red;
}
#sub {
    position: relative;
    float: right;
    width: 350px;
    height: 3500px;
    background: green;
}

---

根据您的评论，不允许用户滚动似乎可以解决问题：

body {
  padding: 0;
  margin: 0;
  overflow-x:hidden;
 }

如果您希望两者都滚动，则必须删除固定定位：

#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
    float:left;
}

---

这对我没有任何帮助。如果使用水平滚动条，则绿色容器仍在红色容器上方运行。如果屏幕宽度较小，您打算如何到达右侧？如果没有重叠，并且两个容器是一起滚动还是被页面两侧均匀隐藏会更好。这是我的问题，所以你同意它不能在小屏幕上访问吗？如果是这样的话，请关掉水平卷轴。谢谢你，@lucuma。我需要的是

主体上的
overflow-x:hidden
。