max-width被视作固定width导致容器过宽，仅用CSS如何实现内容自适应包裹？

仅用CSS即可实现该需求，无需修改HTML结构。

问题根因 #

你遇到的问题是两个CSS规则共同作用导致的：

• 父容器.group的grid-template-columns: auto 1fr规则中，1fr会将第二列的宽度强制拉伸到最大可用空间，内部的.booking-container默认宽度为auto，会直接占满第二列分配的宽度，触及你设置的max-width: 150px上限，和内部子元素数量无关
• .booking-container作为块级网格容器，默认会撑满父级分配的宽度，没有配置自动收缩到内容宽度的规则

修改后的CSS代码 #

你只需要调整两处规则即可：

.group {
  display: inline-grid;
  /* 把1fr改为auto，让第二列宽度由内容实际宽度决定 */
  grid-template-columns: auto auto;
  grid-gap: 5px;
  outline: 1px solid red;
}
.title {
  grid-column: 1/-1;
}
.booking-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 20px);
  grid-gap: 10px;
  max-width: 150px;
  /* 新增该行，让容器宽度自动适配内容的实际宽度 */
  width: fit-content;
}
.booking {
  background: green;
  width: 20px;
  height: 20px;
}

效果说明 #

修改后：

• 当.booking子元素数量少，排列后的总宽度小于150px时，容器会自动收缩到刚好包裹内容的宽度，实现你要的紧凑效果
• 当.booking子元素数量多，排列后的总宽度超过150px时，会自动触发换行，不会突破max-width的限制
• 完全适配任意数量的子元素，不需要单独给不同group写自定义max-width规则

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