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

Posted 2023-03-06

【中文标题】防止网格区域扩大导致整个页面滚动

【英文标题】：Prevent grid area from expanding causing whole page to scroll

【发布时间】：2019-03-18 01:15:33

【问题描述】：

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

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 增长并导致整个页面滚动。

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

有没有办法在网格布局中允许这个功能？我最初让它使用 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>

【参考方案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

【讨论】：

嘿，迈克，min-width: 0 和 overflow: auto 似乎都不适用于带有隐式网格的 Chrome，display: grid?? ://

@BugWhisperer，发布一个显示问题的小提琴或代码笔。或者发布一个新问题。 LMK

我发现干扰的是输入元素的宽度。知道如何使输入元素的行为类似于width: auto，而不是在屏幕外测量相同的元素吗？

你救了我！ minmax(0, 1fr) 是重点，没人指出！

【参考方案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/