父元素使用calc()时，子元素width:inherit无法填充父元素的原因及解决方法

这种情况我之前踩过坑，大概率是盒模型或者布局上下文的问题在搞怪！给你几个亲测有效的解决技巧：

1. 统一盒模型（最常见的根源） #

默认情况下，CSS的盒模型是content-box——元素的width只算内容区，padding和border会额外占用宽度。如果父元素用calc()计算宽度，子元素的width:100%再加上自身的padding/border，很容易出现“看似没填满”的视觉效果（实际是子元素超出了父元素）。

解决方法是给父元素和子元素都设置box-sizing: border-box;，让padding和border被包含在宽度内：

.parent {
  width: calc(100% - 200px);
  box-sizing: border-box;
}
.child {
  width: 100%;
  box-sizing: border-box;
  /* 现在就算加padding、border也不会超出父元素 */
}

2. 检查父元素的Flex布局上下文 #

如果你的父元素是Flex容器（display: flex;），子元素默认不会自动填充父元素宽度——这和父元素用不用calc()无关。此时不需要设置width:100%，而是给子元素加flex-grow: 1;，让它自动撑满父元素：

.parent {
  width: calc(100% - 200px);
  display: flex;
}
.child {
  flex-grow: 1; /* 替代width:100%，自动填充父元素宽度 */
}

3. 排查子元素的额外间距 #

如果子元素设置了margin-left/right或者float属性，也会导致它无法贴合父元素的边缘。如果确实需要保留margin，可以用calc()在子元素的宽度里扣除对应的数值：

.child {
  width: calc(100% - 20px); /* 扣除左右各10px的margin */
  margin: 0 10px;
}

4. 确保父元素是块级元素 #

如果父元素是inline-block，calc()计算的宽度可能会受到行内元素的空白字符影响，导致实际宽度比预期小。可以给父元素加上display: block;，或者移除父元素和子元素之间的换行/空格（inline-block的经典坑）。

另外，你猜测子元素也在执行calc(100% - 200px)其实是不对的——子元素的width:100%是直接继承父元素计算后的实际宽度，和父元素的calc逻辑没有关联，问题的核心还是宽度计算的上下文或者盒模型的冲突。

内容的提问来源于stack exchange，提问作者Get Off My Lawn