Flex布局网页头部随窗口尺寸调整出现异常行为问题求助

问题原因 #

你遇到的flex布局跳变是浏览器计算弹性容器剩余空间时的浮点精度误差导致的：#nav--menu设置了flex:1 0 auto不允许缩小，会优先占据父容器空间，而#nav--logo设置了flex:0 1 auto允许缩小，内部图片高度固定、宽度自适应的特性会放大像素计算的误差，最终出现窗口宽度仅差1px的情况下布局跳变的问题。

修复方案 #

按优先级依次尝试以下修改：

• 禁止logo容器缩小，确保logo区域宽度固定不会被挤压：

header #nav--logo {
    /* 替换原有flex属性 */
    flex: 0 0 auto;
    min-width: max-content;
    position: relative;
    display: flex;
    justify-content: flex-start;
    height: 100%;
}

• 给logo图片添加不收缩规则，避免flex容器强制压缩图片：

header #nav--logo>img {
    width: auto;
    height: 100%;
    flex-shrink: 0;
    object-fit: contain;
}

• 确认.nav-wrapper已设置border-box盒模型，避免padding值撑宽容器触发计算异常：

header>.nav-wrapper {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--max-layout-width);
    box-sizing: border-box;
}

• 如果以上修改后还有跳变，检查全局变量--outer-padding、--max-layout-width的取值，避免使用带多位小数的数值，减少浏览器像素计算误差。

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