如何动态设置子元素max-width为父元素max-width的50%？

嘿，这个场景太熟悉了——大型项目里硬编码数值后期维护简直是噩梦！别担心，咱们用纯CSS/Sass配合styled-components就能搞定，完全不需要额外的React或JS逻辑，给你两种靠谱的方法：

方法一：使用CSS自定义属性（变量） #

这是最灵活的纯CSS方案，利用CSS变量的继承特性，让子元素能直接复用父元素定义的数值：

const Parent = styled.div`
  // 定义一个CSS变量存储父元素的max-width
  --parent-max-width: 1024px;
  max-width: var(--parent-max-width);
  // 其他父元素样式，比如margin: 0 auto; 之类的
`;

const Child = styled.div`
  // 用calc计算父元素max-width的50%
  max-width: calc(var(--parent-max-width) / 2);
  // 其他子元素样式
`;

以后你只需要修改--parent-max-width的值，子元素的max-width会自动跟着变成新值的一半，完全不用手动同步所有子元素。

方法二：使用Sass变量（如果项目用了Sass） #

如果你的项目已经集成了Sass，用Sass变量会更直接，编译阶段就会完成数值计算：

// 先定义一个全局或局部的Sass变量
$parent-max-width: 1024px;

const Parent = styled.div`
  max-width: $parent-max-width;
  // 其他父元素样式
`;

const Child = styled.div`
  // 直接用Sass的除法运算
  max-width: $parent-max-width / 2;
  // 其他子元素样式
`;

这种方法的优势是编译后直接生成固定的像素值，不需要浏览器做calc运算，而且同样只需要修改一次变量，所有关联样式都会更新。

两种方法都完美满足你的需求，选哪种取决于你的项目是否用了Sass——如果没用到，CSS变量是首选；用了Sass的话，变量方案更顺手。

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