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>