我在另一个网格中嵌套了一个网格，并将内部网格（#content）的列和行的大小定义为1fr。
但是当我添加文本时，列显示正确，但行高变大，因此整个容器本身变大。
我认为这是因为字体高度大于1fr，但行的高度甚至比字体大小还要大。
为什么行高会改变？
附：当我将行大小设置为auto时，一切正常，但我不明白为什么1fr在这种情况下不起作用以及在这种情况下定义行的确切高度的原因。
Codepen：https://codepen.io/s4ek1389/pen/gqZvRZ
HTML：
<html>
<body>
<div id="container">
<div id="content">
<div id="label">Author</div>
</div>
<div id="image"></div>
</div>
</body>
</html>
CSS：
body {
background-color: #A9E5BB;
margin: 0;
}
#container {
display: grid;
grid-template-columns: repeat(50, minmax(2vw, auto));
grid-template-rows: repeat(50, minmax(2vh, auto));
}
#content {
display: grid;
grid-template-columns: repeat(50, 1fr);
/* Please take a look at the line below. */
grid-template-rows: repeat(50, auto);
/* Please take a look at the line above. */
grid-column: 11/41;
grid-row: 8/44;
background-color: #2D1E2F;
}
#image {
display: grid;
background-color: #F7B32B;
grid-column: 13/23;
grid-row: 4/48;
}
#label {
color: white;
grid-column-start:36;
grid-row-start: 10;
}
我发现了问题：<p>元素有一个默认的边距。在覆盖它们之后一切正常。