I have flex row with max-height. wrapper of image have min-height:0; property for block height overflow;
but after load image and shrink we see that wrapper of image is not recomputer has extra spaced (red rectangle). How i can recomputed div to shrink to image width?
<div class="flex max-h-[300px] justify-start bg-purple-500">
<div class="flex min-h-0 border-[5px] border-red-700">
<img class="block w-auto mx-auto border-2 border-green-700" src="https://wallpapershome.ru/images/pages/pic_v/14572.jpg"/>
</div>
</div>
Defin a new class and add it to the IMG parrent tage(Border-red). or you can use same class name if you want to ovver-write the defaults.
.border-red-700{
border: red 5px solid;
width: max-content;
position:relative;
margin: auto;
}
also change the image height equal to the DIV tag height (300px);
<img class="block w-auto mx-auto border-2 border-green-700 max-h-[280px]" src="https://wallpapershome.ru/images/pages/pic_v/14572.jpg"/>