如何使用隐藏在 1fr 网格元素上的溢出

Question

所以我有this basic setup - 一个画布区域和一个父网格中的动画师。 父网格也在另一个网格内，其中有一个 1fr 行。 我可以通过上下拖动调整器来调整动画师的大小。

canvas {
  background-color: blue;
}

#grid1 {
  grid-template-rows: 1fr;
}

#grid2 {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

#canvas-area {
  grid-row: 1;
  background-color: red;
}

#animator {
  grid-row: 2;
  height: 200px;
}

<div id="grid1">
  <div id="grid2">
    <div id="canvas-area">
      <canvas/>    
    </div>
    <div id="animator"></div>
  </div>
</div>

我希望画布大于其父元素并隐藏其溢出，但这似乎也扩展了父元素。 我已经尝试过overflow: hidden，但这不起作用

作为一个附带问题：我也注意到画布下面有一个 4px 的空间，这是为什么呢？

Answer 1

我希望画布大于其父元素并隐藏其溢出，但这似乎也扩展了父元素。

通常您会为网格容器添加一个高度，以便grid-template-rows: 1fr auto 中的1fr 有意义；否则 grid item 会自动调整到其内容的尺寸。

---

将overflow: hidden 添加到网格项 #canvas-area 以及固定高度 到容器（比如你之前的jsFiddle 的400px） - 参见下面的演示：

document.querySelector('button').onclick = () => {
  document.querySelector('canvas').height = 300;
}

canvas {
  background-color: blue;
}

#grid {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 400px;
  height: 400px; /* added a fixed height */
}

#canvas-area {
  grid-row: 1;
  background-color: red;
  overflow: hidden; /* added */
}

#animator {
  grid-row: 2;
  height: 200px;
}

<div id="grid">
  <div id="canvas-area">
    <canvas/>    
  </div>
  <div id="animator"></div>
</div>
<button>Change Canvas Height</button>

请注意，添加 min-height: 0 也不会增长容器：

document.querySelector('button').onclick = () => {
  document.querySelector('canvas').height = 300;
}

canvas {
  background-color: blue;
}

#grid {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
   width: 400px;
  height: 400px;
}

#canvas-area {
  grid-row: 1;
  background-color: red;
  min-height: 0; /* added */
}

#animator {
  grid-row: 2;
  height: 200px;
}

<div id="grid">
  <div id="canvas-area">
    <canvas/>    
  </div>
  <div id="animator"></div>
</div>
<button>Change Canvas Height</button>

---

为什么会这样？

默认情况下，网格项目有min-width: auto 和min-height: auto（就像弹性项目一样）。您可以在下面看到这种行为的一些示例：

• css-grid creates an imaginary column
• How to make images stay within the rows of a css grid container?

根据规格：

为了给网格项提供一个更合理的默认最小尺寸，这个 规范定义了 min-width/min-height 的 auto 值也 将指定轴上的自动最小尺寸应用于网格项目 其溢出可见并且跨越至少一个轨道 轨道尺寸功能是自动的。

W3C

---

画布元素下方的空间？

我也注意到画布下面有一个4px的空间，这是为什么呢？

这是 空白，内联元素的一个特征 - 您可以通过将其设为块元素（添加 display: block）或调整 vertical-align 属性（添加 vertical-align: top）来删除它：

document.querySelector('button').onclick = () => {
  document.querySelector('canvas').height = 300;
}

canvas {
  background-color: blue;
  display: block; /* added */
}

#grid {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
   width: 400px;
  height: 400px;
}

#canvas-area {
  grid-row: 1;
  background-color: red;
  min-height: 0; /* added */
  overflow: auto; /* added */
}

#animator {
  grid-row: 2;
  height: 200px;
}

<div id="grid">
  <div id="canvas-area">
    <canvas/>    
  </div>
  <div id="animator"></div>
</div>
<button>Change Canvas Height</button>