Flexbox的flex-wrap属性在元素上不生效，求解决方法

核心问题点 #

1. 父容器固定宽度锁死：.header-content-lower 设置了 width: 1000px 固定宽度，不管屏幕多窄，容器都维持1000px宽度，不会收缩，自然触发不了换行逻辑。
2. 子元素强制平分宽度：子元素的 flex: 1 会让每个元素强制平分父容器宽度，哪怕屏幕宽度不足，只会挤压内容而非换行。
3. 固定高度截断内容：父容器 height: 50px 是固定值，换行后内容高度超过50px会被直接截断。

修改后的完整代码 #

CSS 部分

@import "main.css";
.site-header {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--main-color);
  font-family: 'Ubuntu', sans-serif;
  height: auto; /* 改为auto，适配换行后的整体高度 */
}

.header-content-upper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  width: 90%;
  color: var(--main-font);
  font-size: 1.1vw;
}

.header-content-upper .header-brand {
  color: var(--main-font);
  font-family: Glosa;
  text-align: center;
  font-size: 3.5rem;
}

.header-content-upper .header-nav {
  text-align: end;
}

.header-content-upper li {
  list-style: none;
  display: inline;
  padding: 10px;
}

.header-content-lower {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around; /* 换行后排版更均衡，也可根据需求换成flex-start */
  max-width: 1000px; /* 用max-width替代固定width，屏幕窄时自动收缩 */
  width: 100%; /* 确保容器占满可用宽度 */
  min-height: 50px; /* 用min-height替代固定height，适配换行后的高度 */
  border-top: 1px solid var(--second-font);
  font-size: 1vw;
}

.header-content-lower div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 120px; /* 关键设置：不主动拉伸、允许收缩、基础宽度120px，宽度不足时自动换行 */
  min-width: 100px; /* 避免内容被过度挤压变形 */
  height: 50px;
  color: var(--second-font);
}

.header-content-lower div:nth-child(2n-1) {
  border: 1px solid var(--second-font);
  border-width: 0px 1px 0 1px;
}

.header-brand,
.header-news,
.header-nav {
  flex: 1;
}

HTML 部分（无需修改）

<header class="site-header">
  <div class="header-content-upper">
    <nav class="header-news">Subscribe & get 15% OFF</nav>
    <span class="header-brand">Giovanni</span>
    <div class="header-nav">
      <ul>
        <li>Call + (448) 777 55 00</li>
        <li>CART (0)</li>
      </ul>
    </div>
  </div>
  <div class="header-content-lower">
    <div>HOME</div>
    <div>MENU</div>
    <div>ORDER</div>
    <div>BLOG</div>
    <div>CONTACT</div>
  </div>
</header>

关键修改说明 #

• 父容器宽度：把固定 width 换成 max-width:1000px + width:100%，让容器在屏幕宽度不足时自动收缩，触发换行条件。
• 子元素flex属性：flex:0 1 120px 替代 flex:1，限制子元素不会强制占满空间，同时允许收缩，当容器宽度放不下所有子元素的基础宽度时自动换行。
• 高度适配：把头部和导航栏的固定高度改成 auto 和 min-height，避免换行后内容被截断。

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