防止网格区域扩展导致整个页面滚动

Question

我正在使用以下网格布局：

grid-template-columns: 10em 1fr 10em;
grid-template-rows: 2em 1fr 2em;

创建一个中心区域，该区域填充屏幕的大部分内容，同时在屏幕周围保留一些填充。在此1fr x 1fr网格区域内是一个pane div，其中包含一个editor div，其中一个content div。

content div可以为任意高度，并且editor div设置为overflow: scroll。我的问题是，pane不会editor保持相同的大小并pane处理溢出，而是会增长并导致整个页面滚动。

我可以通过设置pane来阻止overflow: scroll的增长，但这会使编辑器本身滚动而不是滚动。这是不可接受的，因为编辑器的按钮必须始终显示在屏幕上。

在网格布局中是否有一种方法可以允许此功能？我最初使用的是flex布局，其中pane div是100% x 100% flexbox中的单个项目。我改用网格以方便地调整侧面菜单的大小，因此在不使用网格的情况下实施此方法不是可取的。

此外，对多浏览器的支持将是惊人的，但是我的目标浏览器是Chrome。

Here's a jsfiddle with my reproducing my problem.

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#site {
  width: 100%;
  height: 100%;
  background-color: #000;
  
  display: grid;
  grid-template-rows: 10em 1fr 10em;
  grid-template-columns: 2em 1fr 2em;
  grid-template-areas:
  'top top top'
  'lpn mid rpn'
  'bot bot bot';
}

#pane {
  grid-area: mid;
  height: 100%;
  width: 100%;
  background-color: #f0f;
}

#editor {
  display: relative;
  overflow: scroll;
}

#content {
   height: 2000px;
}

<div id='site'>
<div id='pane'>
  <div id='editor'>
    <div id='content'>  
    </div>
  </div>
</div>
</div>

Answer 1

min-width: auto / min-height: auto

通常来说，网格项目不能小于其内容。网格项目的默认最小大小为min-width: auto和min-height: auto。

这通常会导致网格项溢出其网格区域或网格容器。由于无法触发溢出条件（网格项目一直在扩展），因此它还可以防止滚动条在项目上呈现。

要覆盖此默认值（并允许网格项目缩小到其内容大小以上），可以将min-width: 0，min-height: 0或overflow与visible以外的任何其他值一起使用。

此行为（参考官方文档）在这篇文章中进行了解释：

• Prevent content from expanding grid items

---

1fr

要注意的另一件事是1fr的意思是minmax(auto, 1fr)。同样，这意味着它所应用的轨道不能缩小到内容大小以下（即minmax()函数中的 min 值为auto，这意味着内容-

因此，要覆盖此设置，请使用minmax(0, 1fr)而不是1fr。

此处有更多详细信息：https://github.com/w3c/csswg-drafts/issues/1777

---

修订后的演示（已在Chrome，Firefox和Edge中测试）

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#site {
  width: 100%;
  height: 100%;
  background-color: #000;
  
  display: grid;

  /* grid-template-rows: 10em 1fr 10em; */
  grid-template-rows: 10em minmax(0, 1fr) 10em; /* new */

  grid-template-columns: 2em 1fr 2em;
  grid-template-areas:
  'top top top'
  'lpn mid rpn'
  'bot bot bot';
}

#pane {
  grid-area: mid;
  height: 100%;
  width: 100%;
  background-color: #f0f;
  overflow: auto; /* new */
}

#editor {
  /* display: relative; */
  /* overflow: scroll; */
}

#content {
   height: 2000px;
}

<div id='site'>
<div id='pane'>
  <div id='editor'>
    <div id='content'></div>
  </div>
</div>
</div>

jsFiddle demo

Answer 2

不确定100％是否是您要的。我在内容上添加了一个包装使其可滚动，并在其上设置了vh高度，您可以对其进行调整。

#content-scroll {
   height: 40vh;
   overflow: scroll;
}
#content {
   height: 2000px;
}

<div id='site'>
<div id='pane'>
  <div id='editor'>
  <div id='content-scroll'>
    <div id='content'>

    </div>
    </div>
  </div>
</div>
</div>

https://jsfiddle.net/16owL8x0/