调整同一列中的弹性项目

Question

我的页面上有一个水平滑块（可滚动），其中包含子卡片列表。下面的代码 sn-p 工作得很好。

JSFiddle-1：https://jsfiddle.net/28rnwpqk/

我现在想显示不同大小的动态卡片。我对容器 css 进行了以下更改，以便在存在空间的情况下将多张卡片堆叠在同一列中。

.container {
  ...
  flex-direction: column;
  flex-wrap: wrap;
  ...
}

JSFiddle-2：https://jsfiddle.net/k60zLg74/

这导致父容器的宽度仅设置为第一个滑块项的宽度，即 flex-direction:column 属性的 bcz。作为背景颜色，滑块滚动已停止工作。在不影响容器宽度的情况下实现这一目标的正确方法是什么。我的主要要求是如果空间存在并且事先不知道卡片的大小，则将弹性项目垂直堆叠。

Answer 1

CSS 网格可以做得更好：

.viewport {
  width: 600px;
  height: 200px;
  overflow-x: hidden;
}

.container {
  display: inline-grid;
  background-color: DodgerBlue;
  grid-auto-flow:column;
  grid-template-rows:1fr 1fr;
  grid-auto-columns:130px;
  gap: 10px;
  height: 100%;
  min-width:100%;
}

.item {
  box-sizing: border-box;
  background-color: #f1f1f1;
  padding: 20px;
  margin: 10px;
  font-size: 30px;
  grid-row:span 2;
}
.item.small {
  grid-row:span 1;
}

<div class="viewport">
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item small">3</div>
    <div class="item small">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
</div>

Answer 2

您的width: max_content; 设置限制了容器的宽度。删除该属性，您的完整容器将按预期显示为蓝色背景：

.container {
  display: flex;
  background-color: DodgerBlue;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  height: 200px;
}