屏幕小于400px时Header Flex元素宽度异常问题求助

当屏幕宽度小于400px时，header元素收缩无法占满父容器，核心原因在于flex布局的默认行为：你将body和html设置为flex容器（display:flex），但flex子元素（这里的header）默认宽度由内容决定，而非自动占满父容器宽度。此外，未明确设置html和body的宽度，可能导致它们无法完全覆盖视口。

修复步骤： #

1. 确保根容器占满视口宽度

修改body和html的CSS，添加width:100%和min-width:100%，强制它们覆盖整个视口：

body,html{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    font-family: 'Alegreya', serif;
    user-select: none;
    width: 100%;
    min-width: 100%;
}

2. 强制Header占满父容器

给header.header添加width:100%和min-width:100%，或者利用flex布局的align-self:stretch属性（更符合flex规范），让header自动填充父容器宽度：

header.header{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2em 1em;
    background:url(./images/background2.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    min-width: 100%;
    /* 或者替换为 align-self: stretch; */
}

可选优化：处理小屏幕下的文字溢出

小屏幕中.watchlist的white-space:nowrap可能导致文字溢出，可添加媒体查询优化显示：

@media (max-width:400px){
    .watchlist span{
        display: none;
    }
    .header .logo .name{
        font-size: 1.8rem;
    }
    .header .logo .slogan{
        font-size: 0.9rem;
    }
}

修改后，header会在所有屏幕尺寸下保持占满父容器宽度，同时优化小屏幕的显示效果。

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