如何用Flexbox仅显示自适应高度换行子项的第一行？

我有一个包含多个子项的容器，希望根据可用空间创建自适应列，换行到第二行的子项需要隐藏。此前曾使用flexbox和overflow: hidden实现过类似效果，但当时子项为固定高度，现在子项是自适应高度，请问该效果能否通过flexbox实现？

以下代码片段展示了当前子项的表现

当前CSS代码 #

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  resize: horizontal;
  overflow: auto;
}

.card {
  flex: 1;
  width: 100%;
  min-width: 100px;
  background: red;
  padding: 3px;
}

当前HTML代码 #

<div class="wrapper">
  <div class="card">Lipsum</div>
  <div class="card">Longer descriptions</div>
  <div class="card">Longer descriptions <br> foobar</div>
  <div class="card">Small</div>
  <div class="card">Foo</div>
  <div class="card">Barr</div>
</div>

解决方案 #

仅靠flexbox原生属性没法直接实现这个需求——当用flex-wrap: wrap时，flex容器会自动撑开高度容纳所有换行的子项，没法只保留第一行高度并隐藏后续内容。不过可以通过两种方式达成目标：

方式1：结合max-height的Flex近似实现 #

如果子项高度差异不大，可以给容器设置预估的第一行最大高度，配合overflow: hidden隐藏换行内容：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  resize: horizontal;
  overflow: hidden;
  /* 根据子项内容预估第一行最高高度 */
  max-height: 45px;
}

.card {
  flex: 1;
  min-width: 100px;
  background: red;
  padding: 3px;
}

缺点是子项高度动态变化时，预估高度会失效，适配性不强。

方式2：改用Grid布局（更可靠） #

Grid的grid-auto-flow: column可以让子项自动在一行排列成自适应列，超出容器宽度的子项直接被overflow: hidden隐藏，容器高度会自动适配第一行最高子项的高度，完美匹配需求：

.wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(100px, 1fr);
  gap: 1rem;
  resize: horizontal;
  overflow: hidden;
}

.card {
  background: red;
  padding: 3px;
}

内容的提问来源于stack exchange，提问作者S.Visser