Need help understanding fit-content

Question

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.

Answer 1

Late response but I recently ran into the same issue so for anyone curious, the TransformComponent component in react-zoom-pan-pinch constructs two divs, the wrapper and the component. You'll need to pass in styling for both if you want to override the existing styling (source code).

To get this to work for an SVG I did:

<TransformWrapper initialScale={1}>
      <TransformComponent
        wrapperStyle={{
          width: "100%",
          height: "100%",
        }}
        contentStyle={{ width: "100%", height: "100%" }}
      >
          <svg>
          ...
          </svg>
      </TransformComponent>
    </TransformWrapper>

You can add whatever styling you want for your content and your wrapper with the above wrapper style and content style args.