容器在小屏幕下无法保持100%宽度的问题求助

你遇到的容器无法在小屏幕占满全屏的问题，主要来自三个常见原因：浏览器默认样式未重置、box-sizing 属性未正确配置，以及固定宽度的子元素导致容器溢出。以下是具体修复步骤：

1. 重置全局默认样式 #

浏览器会给 html、body 等元素添加默认的 margin 或 padding，这会导致你的容器即使设置了 width:100%，也无法完全贴合屏幕边缘。在SCSS最顶部添加全局重置：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* 防止横向滚动条出现 */
}

* {
  box-sizing: border-box; /* 让元素的width包含padding和border */
}

2. 修复Flex子元素的溢出问题 #

你的 .container--1__img 设置了固定宽度 55rem，当屏幕宽度小于这个值时，会撑开父容器导致横向溢出，看起来容器没占满屏幕。修改图片样式，让它自适应屏幕宽度：

.container--1__img {
  height: auto; /* 替换固定height，保持图片比例 */
  max-width: 100%; /* 图片最大宽度不超过父容器 */
  width: min(55rem, 100%); /* 取固定宽度和屏幕宽度的较小值 */
  object-fit: contain;
  padding: 3rem 0;
  animation: fade-in-from-bottom 0.8s backwards;
}

3. 优化容器的宽度设置 #

块级元素（比如 section）默认宽度就是 100%，所以 .container 和 .main 的 width:100% 可以移除，避免不必要的样式冲突。如果需要确保容器占满父元素，只需保证没有额外的 margin 或 padding 即可。

验证修复效果 #

修改后在Chrome DevTools响应式模式下测试：

• 检查 html、body 和 .container 的宽度是否为100%
• 确认图片在小屏幕下会自动缩小，不会撑开容器
• 查看是否还有横向滚动条，若有则检查是否有其他元素的固定宽度导致溢出

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