Div容器无法随窗口正确横向扩展的技术问题咨询

你的问题根源在于两点：一是main元素未占满视口宽度，导致parent的90vw计算基准与布局空间不匹配；二是parent未设置水平居中，窗口放大时无法保持在视野中央。

以下是两种针对性修复方案：

方案一：居中固定最大宽度的容器 #

该方案让容器最大宽度限制为视口的90%，同时始终保持水平居中，随窗口扩展到最大宽度后不再变大：

修改后的CSS代码：

/* 确保main占满视口宽度 */
main.flex-shrink-0 {
  width: 100%;
}

.parent {
  width: 100%;
  max-width: 90vw; /* 限制容器最大宽度为视口的90% */
  margin: 0 auto; /* 让容器水平居中 */
  overflow: hidden;
}

方案二：自适应全屏带留白的容器 #

如果需要容器始终随窗口扩展，同时左右保持固定比例的留白：

修改后的CSS代码：

main.flex-shrink-0 {
  width: 100%;
}

.parent {
  width: 100%;
  padding: 0 5vw; /* 左右各留5vw空白，内容区域自动占90%宽度 */
  box-sizing: border-box; /* 确保padding不会额外增加容器总宽度 */
  overflow: hidden;
}

两种方案都能解决窗口放大时左侧出现空白、右侧移出视野的问题，可根据实际需求选择。

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