Change viewport width for component running inside svg

Question

I Have a component that is perfectly responsive based on window width. Now this component is loaded dynamically inside an SVG through foriegnObject. The Problem is component is working based on window media queries while I want the component to run based on svg size.. Is it possible? Here is the view

My Question is It possible to somehow run child component media queries based parent svg width and height Here is code

 <svg
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  width="357"
  height="725"
  fill="none"
  viewBox="0 0 357 725"
>
 ......
  <foreignObject
    style={{ width: '322px', borderRadius: '30px' }}
    x="5.2%"
    y="5%"
    height="656"
  >
    <div
      id="style-4"
      style={{
        overflowY: 'auto',
        overflowX: 'hidden',
        width: '100%',
        height: '634px',
      }}
    >
           <ErrorBoundary>
          <Suspense fallback={<CircularProgress />}>
            <Component
              profile={props.selectedProfile}
              downloadVcf={() => console.log('vcf')}
             
            />
          </Suspense>
        </ErrorBoundary>
    </div>
  </foreignObject>
</svg>