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

Question

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

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

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

如果我在类 cardList flex: 1 中注释掉，而是将静态高度设置为 100 像素，则会激活溢出。用 flex: 1 应该可以解决这个问题，但是我感觉我错过了什么。

codepen 的链接在下方。

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

Answer 1

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

很难弄清楚问题是什么？

https://css-tricks.com/almanac/selectors/n/nth-of-type/

https://www.w3schools.com/cssref/sel_nth-child.asp

例如

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

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