CSS 深度嵌套溢出

Question

我有一个 3 列布局，顶部有一个导航。这 3 列构造为带有容器的侧边菜单，在该容器内是另一个带有容器的侧边菜单。

我正在尝试使用 overflow-y: scroll 使所有 div 在视口内滚动，但根据我目前的状态，它似乎被忽略了，整个页面都在滚动反而。

不确定我误会了什么。我用我目前的状态构建了一个 Codepen。

Answer 1

您应该使用 max-height:100% 而不是 height:100%。尝试改变这个。

.outer-side-menu {
  background: orange;
  grid-area: outer-side-menu;
  overflow-y: scroll;
  max-height: 100%;
}
.inner-side-menu {
    background: lime;
    grid-area: inner-side-menu;
    overflow-y: scroll;
    height: 100%;
    font-size: 144px;
}
.inner-container {
    background: red;
    grid-area: inner-container;
    overflow-y: scroll;
    height: 100%;
    font-size: 144px;
}

Answer 2

这是你想要的效果吗？

我从 outer-container、inner-side-menu 和 inner-container

中删除了 height 属性

html body {
  height: 100vh;
  margin: 0;
}
#app {
  background: black;
}
.navigation {
  background: cyan;
  height: 60px;
}

.route-container {
  display: grid;
  grid-template-columns: 0.25fr 0.75fr;
  grid-template-rows: auto;
  grid-template-areas:
    "outer-side-menu outer-container";
  
  height: calc(100vh - 60px);
  background: magenta;
}
.outer-side-menu {
  background: orange;
  grid-area: outer-side-menu;
}
.outer-container {
  background: yellow;
  grid-area: outer-container;
  display: grid;
  grid-template-columns: 0.25fr 0.75fr;
  grid-template-rows: auto;
  grid-template-areas:
    "inner-side-menu inner-container";
    
  /* added */
  overflow: scroll;
  
  /* removed height: 100% */
}
.inner-side-menu {
  background: lime;
  grid-area: inner-side-menu;
  font-size: 144px;
    
  /* prevent horizontal scrolling */
  overflow-x: hidden;
}
.inner-container {
  background: red;
  grid-area: inner-container;
  font-size: 144px;
    
    
  /* prevent horizontal scrolling */
  overflow-x: hidden;

}

<div id="app">
  <div class="navigation">Navigation</div>
  <div class="route-container">
    <div class="outer-side-menu">Side Menu</div>
    <div class="outer-container">
      <div class="inner-side-menu">Inner Side Menu Inner Side Menu Inner Side Menu</div>
      <div class="inner-container">Inner Container Inner Container Inner Container Inner Container</div>
    </div>
  </div>
</div>

CSS 深度嵌套溢出

CSS Deep Nested Overflow

html

css

overflow