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

Question

所以我有这个基本的设置：https://jsfiddle.net/qg6vm05p/1/

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>

画布区域和父网格中的动画制作者。父网格也位于具有一个1fr行的另一个网格内。我可以通过上下拖动缩放器来调整动画师的大小。我希望画布比它的父更大并隐藏它的溢出，但这似乎也扩展了父元素。

我已经尝试过overflow: hidden，但这不起作用

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

Answer 1

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

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

---

将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>

---

Why so?

默认情况下，网格项具有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?

---

Space below canvas element?

我也注意到画布下有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>

您可以在img元素和所有内联元素中看到此行为 - 请参阅此处的另一个示例：

• Inexplicable offsets in some very basic HTML