如何让Flex容器内的Grid布局自适应且不溢出，容器随内容扩展

我尝试在Flex容器内使用Grid布局展示列表项，初始显示正常，但Grid内容会溢出容器。预期效果是容器能随Grid中的数据内容自动增高，而非内容溢出容器高度。曾尝试添加垂直滚动条，虽能生效但不符合需求。

可复现代码 #

CSS代码 #

.dis{
    display: flex;
    height:auto;
}

.dlist {
    display: grid;
    row-gap: 5%;
    column-gap: 10%;
    grid-template-columns: 1fr 1fr 1fr;
}

.dgrid {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    gap: 5px;
}

HTML代码 #

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="a.css" />
   </head>
   <body>
      <div class="dis">
         <div class="dlist">
            <article class="dgrid">
               <h3>John elizabeth</h3>
            </article>
            <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
         </div>
      </div>
   </body>
</html>

问题截图 #

解决方案 #

问题根源 #

row-gap: 5%使用了百分比单位，该单位基于容器高度计算，但Flex容器高度由内容决定，形成「容器高度依赖内容 → 行间距依赖容器高度」的循环依赖，导致浏览器无法正确计算布局，最终引发内容溢出、容器无法被撑开。

修复步骤 #

将Grid的行间距替换为固定单位（如px、rem），或使用自适应单位避免循环依赖：

.dlist {
    display: grid;
    row-gap: 15px; /* 替换5%为固定值，可按需调整 */
    column-gap: 10%;
    grid-template-columns: 1fr 1fr 1fr;
}

进阶优化（可选） #

如果需要自适应间距，可使用clamp()函数实现「最小-自适应-最大」的间距效果：

.dlist {
    row-gap: clamp(10px, 2vw, 20px); /* 视窗宽度变化时自动调整间距 */
}

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