防止DIV水平滚动（粘性），但允许垂直滚动

Question

是否可以防止某个元素水平滚动，但允许其与其余页面内容一起垂直滚动？很难描述，所以让我举个例子：

HTML：

_cls

CSS：

<nav>Side Nav</nav>
<header>Header</header>
<main> 
   <h1>Main Content</h1>
   <div class="wideContainer">
      Some wide and tall container
   </div>
</main>

https://jsfiddle.net/hg2zmu1o/7/

如您所见，左列是固定的。当您垂直滚动时，标题会滚动离开。这是对的。但是，当nav { position: fixed; width: 150px; height: 100vh; } header { height: 100px; padding-left: 150px; } main { padding-left: 150px; } .wideContainer { width: 2000px; height: 1000px; } 区域中有一些宽内容时，它将进行水平页面滚动（很好）。但是，水平滚动时，页眉也会移动到侧面导航列的后面。

如何使其保持水平？

我尝试使用main，但没有成功。

position:sticky

请紧记，我不想对整个标题执行position: sticky; left: 150px; ，因为那样一来它就不会与页面的其余部分垂直滚动。

jsfiddle说明了问题。

编辑：

找到this example，可以证明我的行为。它使用JS，但我希望避免使用。

position:fixed

如果有人知道如何使用纯CSS实现它，请告诉我。否则我可能会与此同时使用。

Answer 1

只需将 overflow-x 添加到CSS中即可。

body {
  padding: 0;
  margin: 0;
  overflow-x:hidden;
}
nav {
  position: fixed;
  width: 150px;
  background-color: gray;
  height: 100vh;
}
header {
  height: 100px;
  background-color: silver;
  padding-left: 150px;
}
main {
  padding-left: 150px;
}
.wideContainer {
  width: 100%;
  height: 1000px;
  background-color: turquoise;
}

<nav>Side Nav</nav>
<header>Header</header>
<main> 
 <h1>Main Content</h1>
 <div class="wideContainer">
   Some wide and tall container
 </div>
</main>

这是您一直在寻找的东西吗？

我还制作了this和this。

希望有帮助！