Html flexbox中css网格元素的自动高度

我希望程序由一个主要组件组成。各种卡片列表将在这个主要组件中动态呈现。主要部件应为100vh高。单个卡片列表应占用可用空间。如果没有足够的空间，卡片列表的网格应该是可滚动的

为此，我使用FlexBox作为主要组件。主组件中的每一项都接收css类flex:1。这应允许所有项目使用可用空间

然而，问题是，单个项目总共使用超过100vh，因为没有激活溢出

如果我在类cardlistflex:1中注释掉，并将静态高度设置为100px，则会激活溢出。使用flex:1应该可以解决这个问题，但我感觉我遗漏了一些东西

下面是代码笔的链接

---

注意：如果我为.grid激活flex:1并删除所有项目，则每个卡片列表的高度都是正确的

您是否尝试过使用css第n个元素来选择单个框或一组框

有点难弄清楚问题是什么

乙二醇

---

代码笔链接：您好，谢谢您的评论。我的目标是呈现不同的卡片列表。卡片列表由标题和包含不同卡片的css网格组成。我的后端决定必须呈现多少卡片列表。无论显示多少卡片列表，都不得超过100vh。我尝试的是，各个卡片列表由flexbox排列，以便动态使用可用空间。如果没有足够的空间，网格将溢出。不幸的是，这不起作用。卡片列表占用的空间超过100vh。所以你说“.main component”类的最大高度是窗口浏览器和“.cardList”的高度类应该适合内部，如果卡片列表的高度太长，则向右滚动？您可以渲染的卡片列表类的最大数量是多少，还是无限？您希望能够滚动哪些div类？对不起，还是有点困惑

p:nth-child(odd) {
  background: red;
}

p:nth-child(even) {
  background: red;
}