设置min-width的居中div窗口缩小时左侧被截断无法滚动如何解决

问题原因 #

这是Flex布局的经典特性：当Flex容器使用justify-content: center/align-items: center居中，且子元素尺寸大于容器尺寸时，子元素左侧/顶部的溢出部分会位于滚动容器的可视起始点之外，无法通过滚动查看。

解决方案 #

这里提供两种验证有效的修改方式： #

方案1：用margin自动居中替换Flex容器对齐属性

直接修改CSS代码即可，不需要改动HTML结构：

body {
  /* 移除原有align-items、justify-content配置 */
  display: flex;
  overflow: auto;
  min-height: 100vh;
  margin: 0;
}

.paper {
  /* 新增margin: auto实现上下左右居中 */
  margin: auto;
  width: 8.5in;
  min-width: 8.5in;
  max-width: 8.5in;
  height: 11in;
  min-height: 11in;
  max-height: 11in;
  background-color: red;
  border: 10px solid black;
}

该方案逻辑最简单，margin: auto的居中逻辑不会导致溢出内容不可滚动，完全保留纸张尺寸固定的要求。 #

方案2：保留Flex对齐属性，修改容器宽高配置

如果不想改动居中的实现逻辑，可以调整html和body的宽高适配规则：

html {
  overflow: auto;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  /* 新增配置：body尺寸跟随内容，最小不小于视口 */
  width: fit-content;
  min-width: 100%;
  height: fit-content;
  min-height: 100%;
  margin: 0;
}

该方案修改后滚动容器变为根节点html，body宽度会自动适配纸张的固定宽度，滚动时可以完整覆盖整个纸张区域。

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