为何设置box-sizing:border-box后，div仍未延伸至元素padding区域？

嘿，这个问题我之前帮好几个开发者捋明白过，咱们慢慢拆解～

首先得明确box-sizing: border-box;的核心作用：它是让元素的width/height属性值直接包含padding和border的尺寸，但有个关键前提——这个width/height得是有明确计算基准的数值。而你遇到的问题，恰恰出在height: 100%;或height: inherit;的取值逻辑上。

问题的核心原因 #

• 当你给子元素设置height: 100%;时，它的高度是基于父元素的计算高度来的。如果父元素没有设置明确的height值（默认是height: auto;，靠内部内容撑开高度），那子元素的height: 100%;就相当于无效，会自动 fallback 到height: auto;。这时候padding会被加到内容高度上，导致子元素整体高度超过父元素。
• height: inherit;也是同理，如果父元素的height是auto，子元素继承的也是auto，padding依然会额外增加元素高度，自然就超出容器了。

举个直观的例子：

.parent {
  /* 父元素没有明确高度，默认auto */
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.child {
  height: 100%; /* 找不到父元素的明确高度，实际是auto */
  padding: 30px;
  box-sizing: border-box;
  background: #f0f0f0;
}

这时候.child的高度是内容高度+30px上下padding，肯定会超出.parent的边界。

解决办法 #

给你两个常用的方案：

1. 给父元素设置明确的高度值：比如用px、vh等固定单位，让子元素的height: 100%;有明确的计算基准。比如：

   .parent {
     height: 500px; /* 明确高度 */
     box-sizing: border-box;
   }
   .child {
     height: 100%;
     padding: 30px;
     box-sizing: border-box;
   }
   

   这时候.child的100%高度会包含padding，不会超出父元素。

2. 用flex布局替代百分比高度：如果不想用固定高度，flex布局是更灵活的选择。把父元素设为display: flex，子元素设为flex: 1，子元素会自动填满父元素的可用空间，padding也会被包含在内：

   .parent {
     display: flex;
     min-height: 100vh; /* 比如让父元素占满视口高度 */
     box-sizing: border-box;
   }
   .child {
     flex: 1;
     padding: 30px;
     box-sizing: border-box;
   }
   

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