Flex布局中屏幕缩小时Section2滚动条异常的原因与解决

我想要实现的布局如下：

当前使用的代码 #

CSS代码

body {
  margin: 0px;
  padding: 0px;
}

header,
footer {
  background-color: pink;
  height: 30px;
}

main {
  height: calc(100vh - 60px);
  display: flex;
}

#sec1,
#sec3 {
  flex: 0 0 120px;
  background-color: yellow;
}

#sec2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.panel {
  position: relative;
  height: 400px;
  width: 700px;
  background-color: grey;
}

HTML代码

<header>Header</header>
<main>
  <section id="sec1">Section1</section>
  <section id="sec2">
    <div class="panel">
      Panel
    </div>
  </section>
  <section id="sec3">Section3</section>
</main>
<footer>Footer</footer>

问题描述 #

当屏幕尺寸缩小时，希望Section2出现滚动条以便查看内部的panel，但目前仅能显示垂直滚动条，水平方向无法滚动。

原因分析 #

问题根源在于flex布局的默认行为：

1. flex项目（这里的#sec2）默认min-width: auto，即元素宽度不会小于其内容的宽度。当panel的固定宽度（700px）超过#sec2的可用宽度时，#sec2会被内容撑开，不会触发水平方向的overflow: auto。
2. #sec2使用了display: flex配合justify-content: center和align-items: center的居中方式，这种情况下，即使内容超出容器，flex容器也不会限制内容的尺寸，进一步阻止了水平滚动条的出现。

修复方案 #

修改#sec2的CSS属性，打破flex的最小宽度限制，并调整居中方式：

body {
  margin: 0px;
  padding: 0px;
}

header,
footer {
  background-color: pink;
  height: 30px;
}

main {
  height: calc(100vh - 60px);
  display: flex;
}

#sec1,
#sec3 {
  flex: 0 0 120px;
  background-color: yellow;
}

#sec2 {
  flex: 1;
  overflow: auto;
  min-width: 0; /* 关键：允许元素宽度收缩至小于内容宽度 */
}

.panel {
  position: relative;
  height: 400px;
  width: 700px;
  background-color: grey;
  margin: auto; /* 用margin实现居中，不影响滚动触发 */
}

修复原理 #

• min-width: 0 取消了flex项目的最小宽度限制，让#sec2可以根据屏幕宽度收缩，当内部panel宽度超出时，触发overflow: auto生成水平滚动条。
• margin: auto 替代flex容器的居中属性，既保证panel在#sec2内的居中显示，又不会在内容超出时干扰滚动条的正常出现。

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