如何让子元素继承父元素width:auto对应的实际像素宽度？

首先得明确一个关键点：CSS的inherit关键字继承的是父元素的指定值（也就是你写在CSS里的那个值），而不是最终渲染后的计算值。所以当父元素#out设置width:auto时，子元素#in用width:inherit拿到的就是auto，而不是父元素实际撑开的像素宽度。

不过要实现你要的效果，有几种靠谱的方法：

方法1：用width:100%替代inherit #

这是最直接的方案。width:100%会让子元素的宽度等于父元素的内容盒宽度（也就是父元素实际渲染的宽度，不包含padding和border）。

修改后的CSS：

#out { 
  width: auto; 
  /* 如果#out有padding，建议加上这个，避免子元素超出 */
  box-sizing: border-box;
} 
#in{ 
  width: 100%; 
  /* 同样给子元素加box-sizing，保持盒模型一致 */
  box-sizing: border-box;
}

如果父元素#out有padding或者border，记得给父子元素都加上box-sizing:border-box，这样width:100%会把padding和border算进宽度里，不会出现子元素溢出父容器的情况。

方法2：CSS变量配合JS（动态场景适配） #

如果你的场景里父元素宽度会动态变化（比如窗口 resize、内容更新），可以用JS获取父元素实际渲染的宽度，赋值给CSS变量，再让子元素引用这个变量：

首先在CSS里定义变量：

#out { 
  width: auto; 
  --actual-width: auto; /* 初始占位值 */
} 
#in{ 
  width: var(--actual-width); 
}

然后添加一段JS代码（放在页面末尾或DOM加载完成后执行）：

const outElement = document.getElementById('out');
function updateParentWidth() {
  outElement.style.setProperty('--actual-width', `${outElement.offsetWidth}px`);
}
// 页面加载时初始化一次
updateParentWidth();
// 窗口大小变化时更新宽度
window.addEventListener('resize', updateParentWidth);
// 如果有动态内容更新，记得在内容变化后调用updateParentWidth()

这种方法能精准拿到父元素的实际像素宽度，适合需要精确控制的动态场景。

方法3：利用块级元素默认特性（无需额外设置width） #

如果#in是块级元素（比如默认的div标签），它的宽度默认就是auto，会自动填满父元素的内容盒宽度。除非你给#in设置了display:inline-block、float或者其他改变盒模型的属性，否则完全不需要设置width属性，它自然会匹配父元素的实际宽度。

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