I have a template layout using flexbox and tailwindcss. I am trying to superimpose svg onto an an image and confine them to the max size of parent container. The image and SVG need to be responsive. Tried for hours/days different methods. Overall size of the page needs to be 80vv and changes with resizing.
Change vh to different element, tried giving same attributes to svg and image
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex h-dvh flex-col bg-black">
<div class="flex items-baseline justify-between bg-red-400 px-2 py-1">
<div>MRI Brain</div>
<button type="button" class="bg-white">
<div class="p-1">Learn</div>
</button>
</div>
<div class="flex flex-grow max-h-100 bg-blue-400">
<div class="bg-orange-400">reformats</div>
<div class="flex flex-grow flex-col bg-pink-400">
<div class="flex justify-center bg-red-800">sequences</div>
<div class="relative flex flex-grow items-center justify-center bg-teal-400">
<img class="object-contain flex-grow" src="https://radiologytemplates.co.uk/storage/images/processed/2_1716024497_189_CTNeck_Coronal_SoftTissue.jpg" />
<svg class="absolute border-2 border-red-400" object-contain viewBox="0 0 550 550">
<path style="opacity:0.28;fill:#00BFA5;stroke:#000000;stroke-width:1.5" d="m 177.54135,133.59116 3.04605,-14.35996 4.78666,-6.52725 6.0921,-7.39756 -3.4812,-12.619362 -15.66541,-8.703007 -10.00846,3.046053 -6.09211,14.359966 1.7406,20.01691 5.88547,25.98157 0.20664,23.62557 -0.64179,14.79512 -0.12745,15.96858 3.83716,9.78448 6.07024,2.96686 3.04605,-2.17575 v -6.52726 c 0,0 -3.04605,-4.3515 -3.04605,-8.26785 0,-3.91636 0.8703,-16.10057 0.8703,-16.10057 l -0.8703,-5.2218 v -6.96241 l 0.8703,-13.05451 1.7406,-16.97086 z" id="path844" pid="53" />
</svg>
</div>
<div class="flex justify-center bg-red-100">opacity</div>
</div>
<div class="bg-purple-400">structures</div>
</div>
<div class="bg-yellow-400">footer</div>
</div>
</body>
</html>