<img> tag and CSS - How to stop overflow by scaling the image down to the available height

Question

I have been trying to make an image viewer component in Yew + tauri. I am using tailwindcss for my css. I have a column flexbox:

#[function_component]
pub fn ImageViewer() -> Html {

    html!(
        <div 
         class="flex gap-2 flex-col items-stretch">
                <div
                 class="p-2 flex-1 rounded bg-blue-400 bg-opacity-5 bg-blend-overlay
                        flex justify-center">
                    <img class="w-auto h-full object-scale-down" src="https://asat.gr/wp-content/uploads/2019/10/cropped-LOGO-12.2-1.png"/>
                </div>
                <p class="rounded text-blue-400 bg-blue-400 bg-opacity-5 bg-blend-overlay">
                    {"This is important information about the image"}
                </p>
        </div>
    )

}

The image is contained inside a div. The main tag is:

#[function_component]
pub fn App() -> Html {
    html! { 
        <main class="h-screen max-h-screen overflow-hidden p-2 flex gap-2 flex-col align-bottom justify-start bg-slate-900">
                <ImageViewer/>
        </main>
    }
}

I have tried all of the object-x options on the <img> tag and on the <div> tag. I have tried the h-full, w-auto, h-auto, w-full and the max- variants on both tags. I have also tried the aspect-square class, since my goal, to have a square image viewer that fits in the window with no overflow, no matter the aspect ratio of the window.

Right now a $> 1$ aspect ratio overflows horribly (with the image used) and a $< 1$ does what I want. For the $>1$ the square aspect ratio of the image can be retained by just centering in the middle. Seems like such a simple problem but no matter the tags I throw at it, it doesn't obey my will.

Answer 1

After much fiddling and trying solutions to problems caused by the item of a flexbox overflowing its parent, I managed to get the desired result by adding the relative class to the div containing the img tag, and the absolute class to the img tag, as suggested in this answer. I showcase the result in this tailwind playground. The second answer doesn't work, as showcased in this playground (I hope I understood it correctly). Answer 1 doesn't work either. I think this works by making the div dimensions seem "locked" to the contained img, so it can't cause its parent to expand anymore.

Note: According to the author of the answer that helped me, since flexbox became widely supported, the first answer of that question is now the optimal one, but it doesn't work here for some reason. I never bothered learning about relative and absolute positioning because I just slap flexboxes everywhere, and it seems as if I shouldn't have to.

Sidenote: I'm just getting into the whole web thing and out of all the technologies involved, CSS is the one that trips me up most of the time. I guess you have to sit down and respect that it has its own intricacies and should be taken as seriously as all the other languages involved.