Search code examples
htmlcssflexboxdragula

How to make the div the size of its content instead of expanding to its max size?

Hello I am trying to make a system of folders which have file inside of them and the files can be dragged between them using this dragula.js.

For some reason the divs of the folder expand to their maximun size even though the content does not require this size. enter image description here

css:

     .folder::before {
        content: "□הפרדה לקבצים בודדים";
        position: relative;
        top: -90%;
        pointer-events: all;
        background-color: white;
        border-radius: 10px;
        padding: 0.5%;
        left: 1%;
    }

    .folder.clicked::before {
        content: "▇מופרד לקבצים בודדים";
    }

    .folder {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        min-height: 1.5em;
        min-width: var(--card-size);
        background-color: #ddd;
        max-width: 40vw;
        justify-content: flex-start;
        align-items: center;
        margin: 1%;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        min-height: 15vh;
        gap: 0;
        clip-path: polygon(0 0, 30% 0, 34% 10%, 100% 10%, 100% 100%, 0 100%);
        padding-top: 5%;
        overflow: auto;
        max-height: 100%;
        pointer-events: none;
    }

    .folder * {
        
        pointer-events: all;

    }



    .folder .card {
        width: 14%;
        height: auto;
        padding: 1%;
        margin: 1%;
        padding: 0;
        margin-bottom: 0.5%;
        margin-top: 0.5%;
        min-width: 4vw;

    }

HTML:

    <div style="background: rgb(255, 204, 203);" class="folder">
         <div class="card" id="12232466521-1" style="border: 5px solid rgb(204, 0, 0);">
            <img id="img10" data-magnify-src="/get_page_from_file/12232466521/1" class="card_img border border-dark zoom" alt="Doc preview not available" loading="lazy" src="/get_page_from_file/12232466521/1">
         </div>
     </div>

Does anyone have a clue why it does that?

Ive been sitting on this for hours and cant understand why they do that. Any help will be greatly appreciated.

I have tried adding and removing the width property and all it does is change the possible width it can expand to but it still expands to the maximum space it can. I tried adjusting the flex to 0 0 auto to make the flex size automatically which didn't do anything.

Solution

  • Try adding width: fit-content; on your .folder class. This should achieve what you're looking for. Here is the MDN on this property.