24
4
I am trying to use a grid display a list of items inside flex display. I was able to display correctly but the grid is overflowing outside the container.
我正在尝试使用网格显示内Flex Display的项目列表。我能够正确显示，但网格在容器外部溢出。
My expected result was the container grows as the data on that is displayed on the grid without overflowing.
我的预期结果是容器随着网格上显示的数据而增长，而不会溢出。
As the list goes on increasing, the list is overflowing the height of the container rather than container height increasing.
随着列表的不断增加，列表将溢出容器的高度，而不是容器高度的增加。
Note: I've tried solutions like adding a vertical scrollbar, which works, but it's not meeting my requirements.
Update: Added a recreatable html and css
注意：我尝试了一些解决方案，比如添加垂直滚动条，很管用，但不能满足我的要求。更新：添加了可重新创建的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.
在网格与容器重叠的位置添加了屏幕截图。问题是容器没有增长，我无法理解为什么网格溢出，而不是外部容器溢出。
Does the demo above show the problem? Some subtle background color on key elements can really help visualize.
上面的演示显示了这个问题吗？关键元素上的一些微妙的背景颜色确实有助于可视化。
Dude, provide an example code that reproduces the problem!
伙计，提供一个重现问题的示例代码！
@imhvost - Added the reproducible code. Thanks.
@imhvost-添加了可重现的代码。谢谢。
It is still not clear what the problem is
目前还不清楚问题出在哪里
Now I understood what it was about and gave an answer
现在我明白了它是关于什么的，并给出了答案
This is caused by the fact that you are using a gap percentage value. You will have to use other units:
这是因为您使用的是GAP百分比值。您将不得不使用其他单位：
.dis {
display: flex;
background-color: blue;
}
.dlist {
display: grid;
gap: 10px;
/* gap: 5% 10%; */
grid-template-columns: repeat(3, 1fr);
}
.dgrid {
display: flex;
flex-direction: column;
border-radius: 10px;
gap: 5px;
background-color: yellow;
}<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>
To make your grid responsive, you can use CSS media queries. These queries enable you to adjust the number of columns based on the screen size. As the screen width changes, the grid can adapt accordingly. Here's an example:
要使您的网格具有响应性，您可以使用CSS媒体查询。这些查询使您能够根据屏幕大小调整列数。随着屏幕宽度的变化，网格可以相应地进行调整。下面是一个例子：
.list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 5% 10%;
}
In this code, auto-fit allows the grid to automatically adjust the number of columns based on available space, and minmax(200px, 1fr) sets a minimum column width of 200px but allows columns to expand when there's more space.
3. Expanding the Flex Container:
在这段代码中，Auto-Fit允许网格根据可用空间自动调整列数，minmax(200px，1fr)将最小列宽设置为200px，但允许在有更多空间时扩展列。3.展开Flex Container：
Flex containers typically expand to fit their content by default. However, if you're facing overflow issues, consider setting a max-height on the flex container or using overflow: auto to add a vertical scrollbar when the content exceeds a certain height. This ensures that the content remains accessible without overlapping the footer.
Here's an updated version of your CSS with these adjustments:
默认情况下，Flex容器通常会扩展以适应其内容。但是，如果您面临溢出问题，可以考虑在flex容器上设置一个max-Height，或者在内容超过一定高度时使用overflow：Auto添加一个垂直滚动条。这样可以确保内容保持可访问性，而不会与页脚重叠。以下是您的css的更新版本，其中包含以下调整：
.App {
display: flex;
flex-direction: column;
justify-content: space-between;
max-height: 100vh; /* Set a max height to prevent excessive growth */
overflow: auto; /* Add a vertical scrollbar if needed */
}
.list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 5% 10%;
}
.footer {
display: flex;
justify-content: center;
}
You can customize the minmax values and other styles to create your preferred layout and ensure responsiveness.
您可以自定义最小最大值和其他样式以创建您的首选布局并确保响应速度。
HTML for running the demo:
用于运行演示的HTML：
<div class="App">
<div class="list">
<article class="grid">
Display1
</article>
<article class="grid">
display2
</article>
<article class="grid">
display3
</article>
</div>
<div class="footer">
footer
</div>
</div>
If my answer does not Help, go to this StackOverflow question if this also don't help you see this tutorial very good explaining has been done here how to use flexbox in grid. If this also don't suit you this is the same StackOverflow question that you asked somewhat same-.
如果我的回答没有帮助，转到StackOverflow问题，如果这也不能帮助你看到本教程，这里已经很好地解释了如何在网格中使用FlexBox。如果这也不适合您，那么这就是您问的同样的StackOverflow问题--
Oh no..! Thank you so much! I wasted 4 days on this ! and Now, I understood why the container is not expanding. I removed the gap for the display grid and added padding to the inner items inside the grid. It's working now.
哦不..！非常感谢!我在这上面浪费了4天！现在，我明白了为什么容器没有膨胀。我去掉了显示网格的间隙，并在网格内部的项目中添加了填充。它现在起作用了。
I was glad to help! 👍
我很高兴能帮上忙！👍
24
4
0
我是一名优秀的程序员,十分优秀！