当图片放入 display: flex 的容器后突然缩小，根本原因是百分比宽度（如 width: 12.3%）始终相对于直接父容器宽度计算，而非视口；而 Flex 容器默认不继承 body/html 的 100% 宽度，导致基准变小。
当图片放入 `display: flex` 的容器后突然缩小，根本原因是百分比宽度（如 `width: 12.3%`）始终相对于**直接父容器宽度**计算，而非视口；而 flex 容器默认不继承 body/html 的 100% 宽度，导致基准变小。
在 Flex 布局中，子元素的百分比尺寸（width、padding、margin 等）严格依据其最近的块级包含块（containing block） 计算——也就是它的直接父容器。你期望 .navbar-left_img 的 12.3% 是相对于整个视口（viewport）宽度，但实际它被解析为：
12.3% × .navbar 的实际渲染宽度。
问题关键在于：虽然你写了 .navbar { width: 100%; }，但 CSS 中 width: 100% 表示“占满其父容器的宽度”，而默认情况下 和
元素并未显式设置 width: 100%，且它们的宽度行为受浏览器默认样式影响（例如 默认有 margin，且未设 box-sizing: border-box）。因此，.navbar 的 100% 实际可能远小于视口宽度，导致子图片按更小的基数缩放。✅ 正确做法是向上透传视口宽度约束，确保从根元素开始宽度链完整：
/* 关键：重置默认边距并强制根元素铺满视口 */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
/* 确保 navbar 真正占据 100vw */
.navbar {
display: flex;
width: 100%; /* 现在真正等于 viewport width */
box-sizing: border-box; /* 避免 padding/border 溢出 */
}
.navbar-left_img {
width: 12.3vw; /* ✅ 更推荐：直接使用 vw 单位，语义清晰、无需依赖父容器宽度 */
padding-top: 2vh;
padding-left: 3vw;
}
⚠️ 注意事项：
- 优先使用 vw/vh 单位：对于需严格响应视口的尺寸（如 logo），12.3vw 比 12.3% 更可靠、可预测；
- 避免嵌套百分比陷阱：若 .navbar-left 是 .navbar 的子项且也设了 width: 100%，则 .navbar-left_img 的 12.3% 将基于 .navbar-left 宽度（可能含内边距或 flex 分配偏差），进一步失真；
-
检查 flex 主轴分配：Flex 容器默认 flex-direction: row，若子项未设 flex: none，可能被 flex 算法压缩。可加 flex-shrink: 0 防止图片被挤压：
.navbar-left_img { width: 12.3vw; flex-shrink: 0; /* 关键：禁止 flex 容器压缩该元素 */ }
? 总结：Flex 容器本身不会“阻止”百分比计算，但它改变了布局上下文。解决缩放问题的核心不是调整 flex 属性，而是明确尺寸参照系——用 vw 替代 %，并确保根元素宽度链无断点。这是响应式布局中必须建立的基础认知。
