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

Question

所以我有这个基本设置 - 一个画布区域和一个父网格中的动画器。 父网格也位于另一个具有 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有意义;否则，网格项会自动调整到其内容的尺寸。

---

#canvas-area将overflow: hidden添加到网格项中，并为容器添加固定高度(例如像以前的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 创建一个虚构列
• 如何使图像保持在 css 网格容器的行内？

从规格来看：

若要为网格项提供更合理的默认最小大小，此 规范定义了最小宽度/最小高度的自动值也 将指定轴中的自动最小大小应用于网格项目 其溢出是可见的，并且至少跨越一个轨道，其最小值 轨道大小调整功能是自动的。

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>