如何在Grid容器内实现带横向滚动的Flex布局？

问题本质 #

Grid列的默认尺寸规则会强制限制内部元素的宽度，导致横向滚动的Flex容器无法根据子元素的内容展开；而纵向滚动版本能正常工作，是因为Grid对高度的溢出限制逻辑不同。

具体修复方案 #

1. 调整Grid容器的列配置 #

修改Grid的列模板，让承载横向滚动Flex的列不再强制固定宽度，改为自适应内部内容的最小必要宽度：

.grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1rem;
}

2. 配置横向滚动Flex容器 #

给横向滚动的Flex容器设置关键样式，确保它能基于子元素内容撑开宽度，同时支持横向滚动：

.flex.horizontal {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  overflow-x: auto;
  width: min-content;
}

/* 保证子元素宽度基于内容，不被压缩 */
.flex.horizontal > * {
  flex-shrink: 0;
  width: max-content;
  height: max-content;
}

3. 纵向滚动Flex容器的参考样式（已实现） #

确保纵向滚动版本维持单一方向滚动、子元素基于内容尺寸的特性：

.flex.vertical {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  height: min-content;
}

.flex.vertical > * {
  flex-shrink: 0;
  width: max-content;
  height: max-content;
}

4. 动态尺寸适配 #

Grid和Flex容器均无需设置固定宽高，依靠auto、min-content等关键字以及内容自身来动态调整尺寸；滚动逻辑仅在内容超出容器时触发，满足单一方向滚动的需求。

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