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

Question

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

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

创建一个充满屏幕大部分区域的居中区域，同时在屏幕周围保留一些填充。在此1fr x 1fr网格区域内是一个panediv，其中包含一个editordiv，该div中包含一个contentdiv。

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

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

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

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

这是我重现我的问题的一个技巧。

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

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;
}

Answer 1

min-width: auto / min-height: auto

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

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

要覆盖此默认值（和允许网格项目缩水超过其内容的大小），你可以用min-width: 0，min-height: 0或overflow比其他任何值visible。

这篇文章中解释了这种行为，并参考了官方文档：

• 防止内容扩展网格项目

1fr

还有一点要注意的是1fr手段minmax(auto, 1fr)。再次，这意味着它所应用的轨道不能缩小到内容大小以下（即，函数中的min值为，表示基于内容）。minmax()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演示