title: Firefox scales SVG in a fit-content container too large
body: <p>I have a container with two elements inside. A Link tag and an inline svg.</p>
  <p>My plan is to set the width of the container to the maximum width of its children, which I assume should be the content of the link tag with its padding.</p>
  <p>Since the svg has no width defined and only uses a viewBox, I would assume the browser to scale the svg to the width of its parent container.</p>
  <p>All browser except firefox are behaving like that. I don't understand why Firefox is stretching the container to 100% of the usable space, even larger than the viewbox of the svg.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    width: fit-content;
    background: #344566;
  }
  
  a {
    padding: 0 4rem;
    color: white;
    font-size: 2rem;
  }
  
  svg {
    fill: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;a href="#"&gt;This is a link&lt;/a&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004" xml:space="preserve"&gt;&lt;path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/&gt;&lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>