如何覆盖网格容器中的align-content属性

Question

我有一个网格容器 .grid-container 具有指定的属性

.grid-container { 
   display: grid;
   heigth: 500px; //for example
   align-content: start;

}

容器内部元素的数量和类型未定义（它们来自服务器） 其中一个元素是具有 .file-viewer 类的网格元素

.file-viewer {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

100%表示高度；在 .file-viewer 中，我希望它距离父级高度为 500px

但这不会发生，因为 align-content: start; 问题是如何覆盖子网格元素内 align-content: start; 的行为 我需要子网格元素占据父元素的整个高度，以便align-content: start;留在网格容器中

我尝试设置网格容器属性 网格自动行：1fr；

和孩子 .file-viewer 设置 网格行：1 / 跨度 1； 这对于 .file-viewer 来说可以正常工作，但是如果其他元素来自服务器，它就无法正常工作

请帮助我如何覆盖 对齐内容：开始；并使网格元素占据网格容器的整个高度

提前致谢

Answer 1

.grid-container {
grid-auto-rows: 1fr;
}
.file-viewer {
grid-row: span 1; 
}