图片上方侧边栏宽度匹配问题：width: inherit/100%无效求助

问题原因分析 #

• width: inherit 导致略宽：你的#logo-holder使用了绝对定位，但父元素#main-pic未设置position: relative，因此它的定位上下文是整个视口（或最近的非static定位祖先，这里是body）。虽然width: inherit继承了#main-pic的40%宽度，但绝对定位元素的盒模型计算逻辑和正常流元素存在差异（比如默认box-sizing: content-box，后续若添加padding/border会额外占用宽度），再加上浏览器微小的渲染差异，就会出现比图片略宽的情况。
• width: 100% 撑满浏览器：同样因为#logo-holder的定位上下文是视口，width: 100%会直接取视口的全宽，自然撑满整个浏览器。

解决方案 #

只需两步就能解决问题：

1. 给父容器#main-pic添加position: relative，让#logo-holder的定位上下文切换为这个父容器，而非视口。
2. 给#logo-holder设置width: 100%（或继续用width: inherit，效果一致），此时它的宽度会和#main-pic完全匹配，也就是和图片宽度一致。

修改后的CSS代码：

body {
    display: flex;
}

#main-pic {
    width: 40%; 
    height: 700px;
    position: relative; /* 新增：指定定位上下文 */
}

#main-pic>img {
    width: 100%;
    height: 100%;
} 

#logo-holder {
    width: 100%; /* 或使用 width: inherit */
    height: 100px;
    background-color: brown;
    position: absolute;
    top: 50%;
    /* 可选：添加transform让垂直居中更精准 */
    transform: translateY(-50%);
}

额外建议：可以给所有元素统一设置box-sizing: border-box，避免后续添加padding或border时破坏宽度布局：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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