css Question posted in
Some basic documentation can be found here.

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

  <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.

Tags:

3

Answers


  1. 0

    The problem arises because min-height: fit-content calculates the minimum height based on the content inside the element. However, when combined with the resize property, which allows users to resize elements dynamically, browsers struggle to accurately calculate and adjust the height in real-time.

    Example of JavaScript Approach:

    <div id="resizeableElement" 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>

<script>
    const resizeableElement = 
    document.getElementById('resizeableElement');
    
    window.addEventListener('resize', () => {
        resizeableElement.style.minHeight = 'fit-content';
        // Adjust other styles or behaviors as needed during resize
    });
</script>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    The min-height: fit-content property in CSS is intended to make an element’s minimum height just enough to fit its content. However, it may not work as expected when combined with certain other properties, such as resizing. If you encounter issues with min-height: fit-content when resizing an element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search