如何使CSS网格填充父元素的高度？

我希望使用CSS网格制作一个按钮，元素填充容器的整个高度：

按钮{
显示：网格；
高度：50px；
网格自动流：列；
对齐项目：居中；
}
.一{
颜色：白色；
背景颜色：紫色；
右边框：1px纯红；
}

一
二

您可以使用

高度：100%

工作示例：


按钮{
显示：网格；
高度：50px；
网格自动流：列；
对齐项目：居中；
}
.一{
颜色：白色；
背景颜色：紫色；
右边框：1px纯红；
身高：100%；
}

一
二
您可以使用
高度：100%

工作示例：


按钮{
显示：网格；
高度：50px；
网格自动流：列；
对齐项目：居中；
}
.一{
颜色：白色；
背景颜色：紫色；
右边框：1px纯红；
身高：100%；
}

一
二

按钮{
显示：网格；
高度：50px；
网格自动流：列；
对齐项目：居中；
}
.一{
颜色：白色；
背景颜色：紫色；
右边框：1px纯红；
}
跨度{
显示器：flex；
对齐项目：居中；
身高：100%；
}

一
二

按钮{
显示：网格；
高度：50px；
网格自动流：列；
对齐项目：居中；
}
.一{
颜色：白色；
背景颜色：紫色；
右边框：1px纯红；
}
跨度{
显示器：flex；
对齐项目：居中；
身高：100%；
}

一
二
谢谢！是否可以使用
grid
保持文本居中，而不是更改为
inline flex
？是的，使用
display:grid
-我更改了答案…谢谢！是否可以使用
grid
保持文本居中，而不是更改为
inline flex
？是的，使用
display:grid
-我更改了答案…这很好，但似乎与现有答案相同。这很好，但似乎与现有答案相同。请不要停在副本的标题处，阅读它，看问题是否相同。@TemaniAfif肯定&完成。这不是一份副本。目标公司最初的措辞有误导性，但实际上是一份副本。为了清晰起见，对其进行了编辑，现在应该更清晰了。我还添加了第二个复制目标，解释了为什么内联元素没有占据容器的全部高度，以及如何使它们占据容器的全部高度。请不要停留在复制的标题处，阅读它以查看问题是否相同。@Temaniaf如果确定（&D）。@。这不是一份副本。目标公司最初的措辞有误导性，但实际上是一份副本。为了清晰起见，对其进行了编辑，现在应该更清晰了。我还添加了第二个dupe目标，它解释了为什么内联元素没有占据容器的全部高度，以及如何使它们这样做。