CSS box-sizing属性未生效，导航栏加padding后内容溢出页面如何解决

• 你的.med-navbar设置了box-sizing: inherit，该属性会继承父级元素的box-sizing规则。如果全局/父元素没有显式设置box-sizing: border-box，元素会默认使用content-box盒模型：此时width: 100%仅代表内容区域宽度，额外设置的左右共4rem的padding会被叠加到总宽度上，最终导致导航栏总宽度超过100%视口宽度，出现横向溢出。

• 方案1：直接修改当前导航栏的box-sizing属性，替换box-sizing: inherit为box-sizing: border-box，该规则会让padding和border都被包含在你设置的100%宽度内部，不会额外撑宽元素。修改后的对应代码如下：

.med-navbar {
    width: 100%;
    height: 15rem;
    box-shadow: atomicItemStyle.$boxShadow;
    display: flex;
    flex-shrink: 1;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    /* 替换inherit为border-box */
    box-sizing: border-box;

    &__brandName {
        font-size: 3rem;
        font-weight: 900;
    }
}

• 方案2：全局统一设置盒模型规则，避免所有元素出现同类问题，在全局CSS中添加如下代码即可，此时你原来的box-sizing: inherit也会正常继承到border-box规则：

/* 全局盒模型统一设置 */
*, *::before, *::after {
  box-sizing: border-box;
}

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