Html 带滚动的css网格

我用css

网格创建了一个容器，因此我可以垂直或水平对齐项目（取决于配置）

网格项只有一个子项。当子对象小于容器时，我希望子对象位于中心，如果子对象大于容器，则容器有一个滚动条

为此，我使用
align items:center
设置网格。它在chrome上运行，但在firefox上，孩子被剪掉了。

然后我做了另一种方法，使用
align content:center
。它适用于firefox，但不适用于chrome。
然后我两个都用了，它也不起作用


我希望网格可以在两种浏览器（或任何浏览器）上运行，而不使用特定于平台的前缀
-webkit-
或
-moz-
或
-whatever-

有什么想法吗

请参见“我的代码”对话框：


：根目录{
--形态水平对齐：居中；
--形态垂直对齐：居中；
}
.集装箱{
背景：粉红色；
边框：嵌入4px蓝色；
高度：200px；
显示：网格；
对齐内容：var（--conf horz align）；
/*适用于chrome，但不适用于firefox*/
/*对齐项目：var（--conf vert align）*/
/*适用于firefox，但不适用于chrome*/
对齐内容：var（--conf vert align）；
溢出y：自动；
}
.窗户{
背景：浅蓝色；
边框：插入16px红色；
宽度：400px；
}
.短{
高度：120px；
}
.窗高{
高度：300px；
}

另一个简单的例子
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。自始至终，除了脸上的表情和脸上的表情之外，还有一种道德败坏


Lorem ipsum，dolor sit amet Concertetur Adipising Elite。自始至终，除了脸上的表情和脸上的表情之外，还有一种道德败坏

在您的示例中，codesandbox本身似乎出了问题。CSS文件对我来说是双重的，并且有冲突。我试着把你的代码复制到外面，它在Chrome、Firefox和Safari上运行良好

align-items: var(--conf-vert-align);

检查此代码：
只需使用以下代码即可。它在所有主流浏览器中都能完美工作。
这里我使用了对齐项目：居中而不是对齐内容

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    background: pink;
    border: inset 4px blue;

    height: 200px;

    display: grid;
    justify-content: center;

    align-items: center;

    overflow-y: auto;
  }

  .window {
    background: lightblue;
    border: inset 16px red;
    width: 400px;
  }
  .window.short {
    height: 120px;
  }
  .window.tall {
    height: 300px;
  }
</style>


* {
保证金：0；
填充：0；
}
.集装箱{
背景：粉红色；
边框：嵌入4px蓝色；
高度：200px；
显示：网格；
证明内容：中心；
对齐项目：居中；
溢出y：自动；
}
.窗户{
背景：浅蓝色；
边框：插入16px红色；
宽度：400px；
}
.短{
高度：120px；
}
.窗高{
高度：300px；
}
是的，codesandbox让我很沮丧。可能它在结果中注入了一个外来的css。嗨，我发现了实际的问题：从.window.toll中删除高度：xxx，然后手动将更多内容添加到.window.toll中，直到它高于父级。然后将道具溢出：自动添加到.window.tall中。firefox上的窗口将被剪掉。我明白了，我复制了它并更新了我的链接。但如果您没有使用overflow:auto-on-window.toll，那么一切都很好，对吗？溢出：子对象上的“自动”使其从中心向各个方向溢出，因为它居中，然后滚动就没有意义了。实际上，子对象是第三方web组件。它发出溢出：自动。所以我需要覆盖溢出：可见！重要的。实际上它没有被剪裁，在页面检查器上高度保持不变，所以逻辑上它应该是完全可见的（我设置了高度：fit content）。无论如何，如果你仍然有问题，请随时回复你的问题。