Html 需要帮助理解fit内容吗

我正在建立一个简单的反应作为个人项目的网页。我正在使用此库为我提供缩放功能：。在我实现这个库之前，我的SVG元素填充了整个屏幕（红色）。这是理想的行为。我希望它尽可能大

在新代码之后，它看起来是这样的

代码：

我对CSS并不感到惊讶，所以我读了这些，我认为这些不应该导致上述行为。有人能帮我了解发生了什么事以及解决问题的最佳方法吗？我知道我可以手动覆盖这些值，但这似乎是一种管道胶带方法

更新

---

我手动取消设置

width:fit内容

，并保持

显示：flex

。然后，我用

flex-grow:1

将svg包装在一个div中。不过，我还是想知道为什么它一开始就不起作用。

试试它包括：

宽度：自动

，

右边距：自动

，

显示：表格

。这对我很有帮助。@sergeykuznetsov我不确定你的意思。起初我认为你需要一个适合内容的替代方案，因为这个规则对浏览器的支持很差：）Sergey是对的，至少没有IE支持。看看这个，也许会有帮助：它在firefox中工作正常，所以我想我应该重写css值，谢谢

<TransformWrapper
      defaultScale={1}
      defaultPositionX={0}
      defaultPositionY={0}
>
  <TransformComponent>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="100%"
      height="100%"
      viewBox={"0 0 1024 792"}
    >
    ...svg stuff here
    </svg>
  </TransformComponent>
</TransformWrapper>

  .container { /* TransformWrapper */
    width: fit-content;
    ...
  }
  .content { /* TransformComponent */
    display: flex;
    width: fit-content;
    ...
  }