窗口缩小后内容超出滚动区域，如何让内容保持可视？

问题原因 #

当前布局里，.header和.main设置了min-width:800px，当窗口宽度小于800px时，这两个容器宽度不会缩小到800px以下。而它们的父容器（#wrapHead、#wrapMain）宽度为100%，通过flex justify-content:center居中后，容器会超出窗口宽度，导致左侧的侧边栏/Logo区域被挤出可视范围，无法完整查看。

解决方案 #

通过以下调整，保留大屏居中布局的同时，确保小屏时内容可通过横向滚动完整显示：

修改后的CSS代码 #

html, body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: auto; /* 允许页面横向滚动，显示全部内容 */
}

#wrapHead {
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  height: 80px;
  top: 0px;
  background-color: #333399;
  color: #ffffff;
}
.header {
  display: flex;
  width: min(80%, 800px); /* 大屏取80%或800px的较小值，明确宽度逻辑 */
  min-width: 800px; /* 保留最小宽度，避免布局混乱 */
}

#wrapMain {
  width: 100%;
  display: flex;
  justify-content: center;
  flex: 1; /* 让主内容区填充剩余高度 */
  margin-top: 80px;
}
.main {
  display: flex;
  width: min(80%, 800px);
  min-width: 800px;
}

.sideCol {
  width: 150px;
  min-width: 150px;
  background-color: #6666cc;
}

.mainCol {
  flex: 1; /* 用flex弹性分配替代width:100%，适配flex布局 */
  min-width: 650px;
  background-color: #9999ee;
}

关键调整点 #

• 给html和body添加overflow-x: auto，当内容宽度超过窗口时自动出现横向滚动条，确保所有内容可滚动查看。
• 将.header和.main的width改为min(80%, 800px)，明确大屏时的宽度计算逻辑。
• 给#wrapMain设置flex:1，让主内容区自动填充剩余高度，避免布局高度异常。
• 把.mainCol的width:100%替换为flex:1，更符合flex布局的弹性分配规则。

效果说明 #

• 窗口宽度≥800px时：内容保持80%宽度（若80%超过800px则取800px），居中显示，头部固定，滚动正常。
• 窗口宽度<800px时：页面出现横向滚动条，拖动滚动条可查看全部内容，不会出现侧边栏或主内容被隐藏的情况。

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