CSS Автоматическая ширина сетки не работает с SVG

Question

У меня сетка из двух столбцов. Первый столбец имеет ширину авто. Второй имеет ширину 1fr.

Первый - это изображение svg с высотой 100%. Его ширина создается на основе этого.

Второй - div со светло-голубым фоном.

#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>

Это выглядит по-другому в firefox, chrome и сафари соответственно (только chrome дает мне то, что я что):

Firefox:

Chrome:

Safari:

I've been сказал , что, как и flexbox, я должен установить свойство min-width как контейнер svg. (Я тоже пробовал поставить эти значения с помощью overflow на все дерево)

#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>

Это снова выглядит по-разному в трех браузерах. На этот раз firefox дает мне то, что я хочу, но chrome и сафари не оставляют места моему синему кругу.

Firefox:

Chrome:

Safari:

<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>

Я невероятно запутался.

Я нашел неудовлетворительное решение: используйте тайм-аут, чтобы сбросить ширину svg для принудительного сафари и chrome для пересчета:

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>