CSS 网格列宽：在 Firefox 中不起作用

Question

我的外部网格有两列； 右上角的单元格包含另一个网格，它是 3 个方形单元格。

在 Firefox 中，内部网格（黄色）水平跨越整个容器，因此比其子元素占用更多空间。 在 Chrome 中，它按预期工作。

我尝试使用grid-auto-columns: min-content等，但没有区别。

 html, body { height: 100%; width: 100%; } body { display: grid; grid-template: 80vmin / 10vmin auto; grid-template-areas: "left right"; }.left { grid-area: left; }.right { grid-area: right; display: flex; }.inner-grid { background: yellow; display: grid; }.inner-grid>.grid-item { height: 100%; background: blue; }.inner-grid>.grid-item:nth-child(even) { background: red; }

 <div class="left"></div> <div class="right"> <div class="inner-grid"> <svg class="grid-item" viewBox="0 0 100 100"> <foreignObject height="100%" width="100%"> <div>1</div> </foreignObject> </svg> <svg class="grid-item" viewBox="0 0 100 100"> <foreignObject height="100%" width="100%"> <div>2</div> </foreignObject> </svg> <svg class="grid-item" viewBox="0 0 100 100"> <foreignObject height="100%" width="100%"> <div>3</div> </foreignObject> </svg> </div> </div>