需要帮助来了解健身内容

Question

我正在构建一个简单的react网页作为个人项目。我正在使用此库为我提供缩放功能：React-zoom-pan-pinch。在实现此库之前，我的SVG元素填充了屏幕（红色）。这是所需的行为。我希望它尽可能大。

在新代码之后，看起来像这样。

代码：

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

我尝试了各种CSS技巧并调整大小来解决此问题，但似乎没有任何效果。我在图书馆的CSS中玩耍，发现这三个规则是元凶。如果我在自己的开发工具中删除所有这3种内容，那么我的svg将恢复为完整大小。

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

我对CSS并不感到惊讶，所以我阅读了这些内容，并且我认为这些内容不会引起上述行为。谁能帮助我了解最新情况以及解决问题的最佳方法？我知道我可以手动覆盖这些值，但这似乎是一条胶带式的方法。

更新

我手动取消设置width: fit-content并保留display: flex。然后，我用flex-grow:1将svg包裹在div中。但是，我仍然想知道为什么它最初不起作用。