I am building a simple react webpage as a personal project. I am using this library to give me zoom capabilities: React-zoom-pan-pinch. Before I implemented this library, my SVG element filled the screen (in red). Which is the desired behavior. I want it to be as big as possible.

After the new code, it looks like this.

Code:

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

I've tried all kinds of css tricks and resizing work arounds to fix it but nothing really seemed to work. I played around with the library's css and I found these three rules to be the culprit. If I delete ALL 3 of these in my dev tools, then my svg returns to full size.

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

I'm not amazing with CSS so I read up on these and I wouldn't think that these should be causing the behavior mentioned. Can anyone help me understand whats going on and best ways to fix it? I know I can manually override these values but that seems like a duct-tape approach.

Update

I manually unset the width: fit-content and kept the display: flex. I then wrapped my svg in a div with flex-grow:1. However, I'd still like to know why it wasn't working in the first place.