仅用CSS实现水平滚动容器内两行不等宽元素的指定顺序排列

你可以通过CSS Grid的列优先流布局实现该需求，核心逻辑是让网格优先按列填充内容，固定仅展示2行，超出的内容自动生成新列向外延伸，配合横向滚动即可满足所有要求：

实现代码 #

.wrapper {
  display: grid;
  /* 固定为两行，高度随内容自适应 */
  grid-template-rows: repeat(2, auto);
  /* 开启列优先填充，元素会先填满一列的两行再切换到下一列 */
  grid-auto-flow: column;
  /* 每列宽度自动适配内容的最大宽度，无需固定值 */
  grid-auto-columns: max-content;
  /* 超出容器宽度时横向滚动 */
  overflow-x: auto;
  /* 可选：设置元素之间的间距 */
  gap: 10px;
  /* 可选：设置容器基础样式 */
  padding: 10px;
  height: fit-content;
}

/* 子元素无需特殊设置，宽度可自由定义 */
.wrapper > div {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  white-space: nowrap;
}

效果说明 #

以上代码完全符合要求的排列顺序，子元素数量任意增减都会自动排版，不需要修改任何固定宽度参数，也完全适配你给出的DOM结构，无需额外嵌套子容器。

内容的提问来源于stack exchange，提问作者Max Flex