Css min-height: fit-content does not work with resize

Question

  <div class="h-fit w-fit min-h-fit min-w-fit resize overflow-hidden bg-gray-200">
            <div> Content goes here.</div>
            <div> Content goes here.</div>
            <div> Content goes here.</div>
            <div> Content goes here.</div>
            <div> Content goes here.</div>
        </div>

The above is a minimal example tested in firefox and edge. Even though it uses tailwind i have tried with inline styles too. min-w-fit (min-width: fit-content) works as expected but the equivalent for min height does not.

Answer 1

In order for that to work you need to set a static value like min-h-[200px], but you don't wanna do that, so a workaround would be: Remove min-h-fit and after the element renders, get it's height using JS and set it as a static minimum height

<div id="parentElement" class="h-fit w-fit min-w-fit resize overflow-hidden bg-gray-200">
    <div> Content goes here.</div>
    <div> Content goes here.</div>
    <div> Content goes here.</div>
    <div> Content goes here.</div>
</div>

<script>
    const height = document.getElementById('parentElement').offsetHeight;
    document.getElementById('parentElement').style.minHeight = `${height}px`;
</script>