I have a two column grid. The first column has a width of auto. The second has a width of 1fr.
The first is a svg image with a height of 100%. Its width is generated based on that.
The second is a div with a lightblue background.
#grid {
grid-template: 1fr / auto 1fr;
grid-template-areas: "left right";
}<div id="grid" style="display: grid; height: 200px; width: 400px; border: 1px solid black;">
<svg style="grid-area: left; height: 100%;" viewBox="0 0 20 20">
<ellipse fill="blue" rx="10" ry="10" cx="10" cy="10"></ellipse>
</svg>
<div style="grid-area: right; background-color: lightblue;"></div>
</div>This looks different in firefox, chrome and safari respectively (only chrome gives me what I what):
Firefox:
Chrome:
Safari:
I've been told that, like flexbox, I must set the min-width property the container of the svg. (I've tried putting those values with a overflow on the entire tree, too)
#grid {
grid-template: 1fr / auto 1fr;
grid-template-areas: "left right";
}<div id="grid" style="display: grid; height: 200px; width: 400px; border: 1px solid black;">
<div style="min-width: 0; height: 100%; grid-area: left;">
<svg style="height: 100%;" viewBox="0 0 20 20">
<ellipse fill="blue" rx="10" ry="10" cx="10" cy="10"></ellipse>
</svg>
</div>
<div style="grid-area: right; background-color: lightblue;"></div>
</div>This again looks different in the three browsers. This time firefox gives me what I want but chrome and safari give my blue circle no room.
Firefox:
Chrome:
Safari:
Is there a way to give an svg grid item a width of auto and have it act sanely when the SVG item's width is generated from its height?
Bizarrely, flexbox gives me what I want in all three browsers:
<div style="display: flex; height: 200px; width: 400px; border: 1px solid black;">
<div style="min-width: 0; height: 100%;">
<svg style="height: 100%;" viewBox="0 0 20 20">
<ellipse fill="blue" rx="10" ry="10" cx="10" cy="10"></ellipse>
</svg>
</div>
<div style="flex-grow: 1; background-color: lightblue;"></div>
</div>I am incredibly confused.
I've found an unsatisfactory solution: use a timeout to unset the width of the svg to force safari and chrome to recalculate:
setTimeout(_ => {
document.querySelector("svg").style.width = "unset"
})#grid {
grid-template: 1fr / auto 1fr;
grid-template-areas: "left right";
}<div id="grid" style="display: grid; height: 200px; width: 400px; border: 1px solid black;">
<div style="min-width: 0; height: 100%; grid-area: left;">
<svg style="height: 100%; width: 0;" viewBox="0 0 20 20">
<ellipse fill="blue" rx="10" ry="10" cx="10" cy="10"></ellipse>
</svg>
</div>
<div style="grid-area: right; background-color: lightblue;"></div>
</div>