我正在try 使用网格显示内Flex Display的项目列表.我能够正确显示，但网格在容器外部溢出.
我的预期结果是容器随着网格上显示的数据而增长，而不会溢出.
随着列表的不断增加，列表将溢出容器的高度，而不是容器高度的增加.
- 如何才能在不导致溢出的情况下扩展Flex容器？
注意:我try 了一些解决方案，比如添加垂直滚动条，很管用，但不能满足我的要求. 更新:添加了可重新创建的html和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;
} <!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>Added a screenshot where the grid is overlapping the container. The problem is the container is not growing and I am unable to figure of why the grid is overflowing and not the outer container.
