Question

我有两个CSS网格。一个在另一个。我不希望整个页面滚动，而只希望滚动嵌套网格的网格区域的内容。此嵌套的网格应填充所有可用空间。但是overflow:scroll在此嵌套网格中不起作用。

如下面的简化示例所示，类为.aside的div可以完美地工作，而带有.bottomleft的div则完全不滚动。

div高度开始与.main-container-div断开，但我不知道为什么。

真正让我感到困惑的是，为什么在.aside-div中一切正常。我在这里看到的唯一区别是它不在嵌套网格中。

自然地，如果将.bottom-left-div或.main-container-网格的第二行指定了固定的高度，那么一切都会很好地工作，但是目标是使其可变。

我还尝试将各种max-heights和heights添加到其他父div中，但到目前为止没有成功。

谢谢！

html,
body {
  height: 100%;
  overflow: hidden;
}

#root {
  height: 100%;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto;
  grid-template-areas: 'nav nav ' 'aside main';
  height: 100%;
}

.header {
  grid-area: nav;
  background-color: lightblue;
}

.main {
  grid-area: main;
  background-color: lightpink;
  height: 100%;
}

.aside {
  grid-area: aside;
  overflow-y: scroll;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto;
  grid-template-areas: 'topleft topright' 'bottomleft bottomright';
  height: 100%;
  
}

.topleft {
  grid-area: topleft;
}

.topright {
  grid-area: topright;
}

.bottomleft {
  grid-area: bottomleft;
  overflow-y: scroll;
  height: 100%;
}

.bottomright {
  grid-area: bottomright;
}

<div id="root">
  <div class="container">
    <div class="header">
      header
    </div>
    <div class="main">
      <div class="main-container">
        <div class="topleft">
          topleft
        </div>
        <div class="topright">
          topright
        </div>
        <div class="bottomleft">
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>

          <div>last</div>

        </div>
        <div class="bottomright">
          bottomright
        </div>
      </div>
    </div>
    <div class="aside">
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>last</div>
    </div>
  </div>
</div>

Answer 1

从某种意义上说，滚动功能不能作用于一个元素（.aside），而不能作用于另一个元素（.bottomleft），这是正确的。似乎没有任何实质性差异。一个元素是嵌套的网格容器。但这没关系。

但是，如果您看的是大图，则两个滚动条都不起作用。

overflow属性通常需要固定长度才能生成滚动条。没有这样的限制，该元素只会扩展以容纳内容，并且不可能溢出。

代码中就是这种情况：两个溢出元素都设置为height: auto。

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto; <-- second row (where 'aside' is placed) is
                                     set to content-based height
  grid-template-areas: 'nav nav ' 'aside main';
  height: 100%;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto; <-- second row (where 'bottomright' is placed) is
                                     also set to content-based height
  grid-template-areas: 'topleft topright' 'bottomleft bottomright';
  height: 100%;
}

现在参考MDN中所述的规则：

为了使overflow生效，块级容器必须具有设置的高度（height或max-height）或white-space设置为{{ 1}}。

因此，代码在两种情况下的滚动功能都将失败。一个人至少可以在一个浏览器中工作的事实表明异常或intervention。无论哪种情况，我都认为这是不可靠的。

考虑一个折衷方案：牺牲一些灵活性以换取更多的稳定性和安全性。这是您代码的修改版本：

revised fiddle

nowrap

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 25px calc(100vh - 25px); /* adjustment */
  grid-template-areas: 'nav nav ' 'aside main';
  height: 100vh;
}

.header {
  grid-area: nav;
  background-color: lightblue;
}

.main {
  grid-area: main;
  background-color: lightpink;
}

.aside {
  grid-area: aside;
  overflow-y: scroll;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 25px calc(100vh - 50px);  /* adjustment */
  grid-template-areas: 'topleft topright' 'bottomleft bottomright';
}

.topleft {
  grid-area: topleft;
}

.topright {
  grid-area: topright;
}

.bottomleft {
  grid-area: bottomleft;
  overflow-y: scroll;
}

.bottomright {
  grid-area: bottomright;
}

body {
  margin: 0; /* remove default margins */
}

嵌套网格中的溢出滚动中断

1 个答案: