高度为100vh的元素覆盖水平滚动条

Question

我的页面在大屏幕上水平滚动。我将<nav>元素设置为position: fixed和height: 100vh。

问题是<nav>在视口外（？）并位于水平滚动条的顶部（难以滚动！）。请参阅下面的屏幕截图和代码示例。

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

ul {
  list-style: none;
}

.main-site-title, .site-description {
  text-align: center;
  font-family: sans-serif;
  padding: 1rem;
}

nav {
  background: rgba(0, 255, 111, 0.81);
  position: fixed;
  height: 100vh;
  width: 225px;
}

.main-content-list {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100vh;
  max-height: 1211px;
  padding-left:225px;
}

.main-content-list li {
  display: inline-block;
  width: auto;
  vertical-align: bottom;
}

.image-item {
  height: 100vh;
  max-width: initial;
}
  
.image-item img {
  width: auto;
  height: 100vh;
}

<link href="https://fiddle.jshell.net/css/normalize.css" rel="stylesheet"/>
<nav>
  <h1 class="main-site-title">Site Title</h1>
  <p class="site-description">Nav goes here.</p>
</nav>

<article>
  <ul class="main-content-list">
    <li class="image-item"><img src="https://placekitten.com/1500/1000"></li><li class="image-item"><img src="https://placekitten.com/1500/1000"></li><li class="image-item"><img src="https://placekitten.com/1500/1000"></li><li class="image-item"><img src="https://placekitten.com/1500/1000"></li><li class="image-item"><img src="https://placekitten.com/1500/1000"></li>
  </ul>
</article>

可能与this question有关，但我不确定。我希望滚动条可用，并知道为什么会发生这种情况。

Answer 1

解决方案是将overflow-x: auto添加到根元素（html） https://jsfiddle.net/soaby3jp/5/

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
}

ol, ul {
  list-style: none;
}

.main-site-title {
  text-align: center;
  font-family: sans-serif;
  padding: 2rem;
}

nav {
  background: rgba(0, 255, 111, 0.81);
  position: fixed;
  height: 100vh;
  width: 300px;
}

.main-content-list {
  white-space: nowrap;
  /*overflow-x: auto;
  overflow-y: hidden;*/ /* put these to the root element (html) */
  height: 100vh;
  max-height: 1211px;
  padding-left: 300px;
}

.main-content-list li {
  display: inline-block;
  width: auto;
  vertical-align: bottom;
}

img {
  width: auto;
  height: 100vh;
}

.image-item {
  height: 100vh;
  max-width: initial;
}
  
html {
  overflow-x: auto;
  overflow-y: hidden;
}

<nav>
  <h1 class="main-site-title">Test for SO</h1>
</nav>

<article>
  <ul class="main-content-list">
    <li class="image-item"><img src="https://placekitten.com/1500/1000"></li><li class="image-item"><img src="https://placekitten.com/1500/1000"></li><li class="image-item"><img src="https://placekitten.com/1500/1000"></li><li class="image-item"><img src="https://placekitten.com/1500/1000"></li><li class="image-item"><img src="https://placekitten.com/1500/1000"></li>
  </ul>
  <!-- /.main-content-list -->
</article>