如何让flex容器随flex item自动增长？CSS Grid场景适配

你的核心问题在于：grid-template-columns: max-content依赖Flex容器（.cell）的固有宽度，但默认情况下Flex容器会收缩以适应内容，而.item的flex: 1 1 0设置了它的基准尺寸为0，无内容时无法撑开父容器，导致Grid列无法达到预期宽度。

以下两种方法可以实现你想要的效果：

方法一：强制Flex容器被子项撑开 #

修改CSS规则，让Flex容器的宽度由子项的最大可能宽度决定：

.grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 30px;
  border: 4px solid black;
}

.cell {
  display: flex;
  border: 4px solid orange;
  background: rgb(211, 211, 211);
  /* 让容器宽度匹配子项的最大宽度 */
  width: max-content;
}

.item {
  /* 允许子项扩展到max-width，同时保留收缩能力 */
  flex: 1 1 auto;
  max-width: 200px;
  border: 4px solid blue;
}

修改后，.cell会被.item的max-width撑开，Grid列的max-content就会匹配这个宽度，最终子项自动扩展到最大宽度，同时定义Grid列的尺寸。

方法二：用fit-content()直接控制Grid列宽 #

使用fit-content()指定Grid列的最大限制宽度，让列宽自动适应内容但不超过设定值：

.grid {
  display: grid;
  /* 列宽最多为216px（200px子项宽度 + 8px子项边框 + 8px容器边框） */
  grid-template-columns: fit-content(216px) 1fr;
  grid-template-rows: 30px;
  border: 4px solid black;
}

.cell {
  display: flex;
  border: 4px solid orange;
  background: rgb(211, 211, 211);
  width: 100%;
}

.item {
  flex: 1 1 0;
  max-width: 200px;
  border: 4px solid blue;
}

fit-content(216px)会让列宽在内容宽度和216px之间取较小值，配合.cell的width:100%，子项会自动撑满容器并触达max-width限制。

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