嘿，我来帮你搞定这两个CSS过渡的问题：

1. 怎么给被包裹的子div的宽度变化加过渡动画？ #

要让宽度过渡生效，得抓住几个关键要点：

• 子div的初始宽度和目标宽度必须是可计算的具体值（比如像素、百分比，别用auto、max-content这类关键字，大部分场景下过渡不支持这类值的切换）
• 给子div明确设置transition属性，指定要过渡的属性（比如width）和时长
• 通过hover、类名切换等方式触发宽度的具体数值变化

举个简单的示例：

.parent {
  width: 200px;
}
.child {
  width: 100%; /* 初始具体值 */
  transition: width 1s ease; /* 专门过渡width属性 */
  background: #ddd;
}
.parent:hover .child {
  width: 300px; /* 变化后的具体像素值 */
}

2. 你的hover宽度过渡没生效的原因&修复方案 #

为啥宽度没动画？ #

你当前的代码里，.box初始宽度是100%（对应.container的100px），hover时改成了width: max-content——但max-content是CSS的内在尺寸关键字，不是具体的数值，CSS过渡没法在“百分比”和“关键字”之间平滑过渡，所以宽度变化是跳变的；而背景色是颜色值，属于过渡支持的类型，所以正常动起来了。

几种修复办法 #

办法一：用具体数值代替max-content（适合能预估文本宽度的情况）

如果你能大概算出文本展开后的宽度，直接换成具体像素值就行：

/* 保留你的HTML结构，修改CSS如下 */
.container { 
  overflow: visible; 
  width: 100px; 
  height: 100px; 
  border: 1px solid red;
}
.container:hover .box { 
  width: 350px; /* 换成你实际文本的宽度 */
  background: green; 
}
.box { 
  min-width: 100%; 
  width: 100%; 
  transition: width 1s, background 1s; /* 明确过渡属性，更清晰 */
  overflow: hidden; 
  background: red; 
  height: 1rem; 
  margin-top: 1rem; 
}
.box-title { 
  width: 100%; 
  color: black; 
  font-size: 0.9rem; 
}

办法二：用transform: scaleX()实现（无需预估宽度，更灵活）

如果不确定文本宽度，可以用缩放变换来模拟展开效果，transform是过渡完全支持的属性：

.container { 
  overflow: visible; 
  width: 100px; 
  height: 100px; 
  border: 1px solid red;
}
.container:hover .box { 
  /* 缩放比例=目标宽度/初始宽度，这里350px是文本实际宽度，你可以根据实际调整 */
  transform: scaleX(calc(350px / 100px)); 
  background: green; 
}
.box { 
  min-width: 100%; 
  width: 100%; 
  transform-origin: left center; /* 从左侧开始缩放，更符合展开的视觉逻辑 */
  transition: transform 1s, background 1s;
  overflow: hidden; 
  background: red; 
  height: 1rem; 
  margin-top: 1rem; 
}
.box-title { 
  width: max-content; /* 让标题内容撑开自己的宽度 */
  color: black; 
  font-size: 0.9rem; 
}

办法三：用CSS Grid过渡（进阶，适配内容宽度）

如果想完全基于内容宽度过渡，现代浏览器支持Grid的grid-template-columns过渡到max-content，可以这么写：

.container { 
  display: grid;
  grid-template-columns: 100px; /* 初始宽度 */
  transition: grid-template-columns 1s ease;
  width: 100px; 
  height: 100px; 
  border: 1px solid red;
}
.container:hover {
  grid-template-columns: max-content; /* hover时自动适配内容宽度 */
}
.box { 
  background: red; 
  transition: background 1s ease;
  height: 1rem; 
  margin-top: 1rem; 
}
.container:hover .box {
  background: green;
}
.box-title { 
  color: black; 
  font-size: 0.9rem; 
}

这个方案不用预估宽度，浏览器会自动计算内容宽度，不过要注意兼容性（现代浏览器都支持）。

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