嵌套Flex布局问题：横向Flex中纵向换行列表横向溢出

问题场景 #

我在嵌套两个CSS Flexbox布局时遇到了人为失误类问题：

• HTML的body是占满整个视口的Flex容器，目的是让main占据header未使用的空间
• 竖屏布局下（body设为flex-flow: column nowrap，header内的ul设为flex-flow: row wrap），导航栏完全正常
• 横屏布局下（body设为flex-flow: row nowrap，ul设为flex-flow: column wrap），ul会出现横向溢出，只有手动设置ul宽度才能达到预期效果

以下是Firefox 131中复现该问题的最小代码：

CSS代码 #

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

body {
  display: flex;
  flex-flow: row nowrap;
  width: 100vw;
  height: 100vh;
}

main {
  flex: 1 0;
}

/* Header overflows in x when flex ul wraps instead of adapting its width. Desired behaviour only if I set ul width manually. */
header {
  background: DimGrey;
  height: 100%;
  overflow-x: scroll;
}

ul {
  display: flex;
  flex-flow: column wrap;
  height: 100%;
}

li {
  list-style: none;
  padding: 2ex;
  margin: .5ex;
  background: white;
}

HTML代码 #

<header>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
  </ul>
</header>
<main>
  <h1>Flex column wrap inside flex row wrap</h1>
</main>

问题根源 #

当ul使用flex-flow: column wrap时，Flex容器需要明确自身的可用宽度，才能计算换行的列数。但当前header作为body的Flex子元素，默认没有设置宽度限制，ul会根据内容自动无限撑开，最终导致横向溢出。

解决办法 #

给header添加两个关键属性，同时按需调整ul的约束：

修改后的CSS #

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

body {
  display: flex;
  flex-flow: row nowrap;
  width: 100vw;
  height: 100vh;
}

main {
  flex: 1 0;
}

header {
  background: DimGrey;
  height: 100%;
  flex-shrink: 0; /* 防止header被main挤压变形 */
  width: fit-content; /* 让header宽度自动适配内部ul的内容 */
}

ul {
  display: flex;
  flex-flow: column wrap;
  height: 100%;
  max-width: 100%; /* 可选：确保ul宽度不超出header */
}

li {
  list-style: none;
  padding: 2ex;
  margin: .5ex;
  background: white;
}

也可以直接给ul设置width: fit-content，让header的宽度由ul决定：

header {
  background: DimGrey;
  height: 100%;
  flex-shrink: 0;
}

ul {
  display: flex;
  flex-flow: column wrap;
  height: 100%;
  width: fit-content;
}

两种方式都能让ul在横向布局下自动适配内容宽度，避免溢出问题。

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