如何让文件夹Div自适应内容尺寸而非扩展至最大宽度？

我正在搭建一个包含文件的文件夹系统，使用dragula.js实现文件在文件夹间的拖拽功能。但目前文件夹Div会自动扩展至最大尺寸，即便内容不需要这么大的空间（见配图：）。

当前使用的代码 #

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>

解决方案 #

问题根源在于块级flex容器的默认宽度行为：display:flex的元素是块级元素，默认会占满父容器的可用宽度（直到你设置的max-width:40vw），而非根据内容自适应。同时flex-wrap:wrap配合默认的align-content:stretch也可能导致高度被不必要拉伸。

修改步骤：

1. 将.folder的display: flex改为display: inline-flex，让容器宽度由内部内容决定，而非强制占满父容器
2. 合并重复的min-height属性，避免样式冲突
3. 添加align-content: flex-start，防止换行时容器高度被拉伸
4. 将伪元素的定位改为absolute，配合父容器的position:relative，让标题定位更稳定（原相对定位的top:-90%容易出现偏移问题）

修改后的核心CSS代码 #

.folder {
    display: inline-flex; /* 关键：让宽度自适应内容 */
    position: relative; /* 为伪元素的绝对定位提供参考 */
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 15vh; /* 合并重复的min-height */
    min-width: var(--card-size);
    background-color: #ddd;
    max-width: 40vw;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start; /* 防止wrap时高度被拉伸 */
    margin: 1%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    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::before {
    content: "□הפרדה לקבצים בודדים";
    position: absolute; /* 改为绝对定位，避免偏移 */
    top: 1%;
    left: 1%;
    pointer-events: all;
    background-color: white;
    border-radius: 10px;
    padding: 0.5%;
}

修改后，文件夹会根据内部卡片的数量自动调整宽度，不会强行撑到最大宽度；同时高度也会保持合理尺寸，不会被不必要拉伸。

内容的提问来源于stack exchange，提问作者Amit Dagani