My outer grid has two columns; the upper right cell contains another grid which as 3 square cells.
In Firefox the inner grid (yellow) horizontally spans the whole container, thus taking more space than its children. In Chrome it's working as expected.
I tried using grid-auto-columns: min-content etc., but no difference.
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>