Firefox下CSS异常：页面右侧无元素空白问题排查求助

我是一名初级前端开发者，正在制作个人首个作品集，测试版本已部署到共享主机。测试多浏览器兼容性时发现，页面在Chrome、Opera、Edge中显示正常，但仅在Firefox下，页面右侧会出现超出元素范围的空白区域。我通过浏览器控制台排查，怀疑是project-container div元素导致，但调整其宽度并未解决问题，不想把问题简单归结为浏览器特性，希望能找到问题根源并修复。

相关代码 #

CSS代码 #

*, ::before, ::after {
  box-sizing: border-box;
}
.BackgroundImage {
  max-width: 100%;
  width: 100vw;
  display: flex;
}

.BackgroundImage img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.project-container {
  min-width: 80%;
  position: relative;
  right: 85%;
}

HTML代码 #

<div class="BackgroundImage">
  <img alt="" src="https://personalfolio.apoillot.fr/storage/images/Homeimage.jpg">
  <div class="project-container">(whatever)</div>
</div>

问题根源与修复方案 #

问题分析 #

Firefox和Chromium系浏览器在flex容器处理position: relative元素的方式上存在差异：

• .BackgroundImage是flex容器，设置了width: 100vw，但flex布局下，子元素的相对定位偏移会被计入容器的总宽度计算（Firefox严格遵循这一规则）
• project-container设置了right: 85%的相对偏移，导致它向左侧偏移的同时，容器需要为它原本的位置预留空间，最终使容器宽度超出100vw，触发横向滚动条和右侧空白

修复步骤 #

1. 快速解决溢出问题：给.BackgroundImage添加overflow: hidden，隐藏超出容器范围的内容

.BackgroundImage {
  max-width: 100%;
  width: 100vw;
  display: flex;
  overflow: hidden; /* 添加这一行 */
}

2. 优化定位逻辑（推荐）：如果需要project-container在图片上方定位，改用position: absolute替代相对定位，避免影响flex容器的宽度计算：

.BackgroundImage {
  max-width: 100%;
  width: 100vw;
  display: flex;
  position: relative; /* 设为相对定位作为绝对定位的参考容器 */
  overflow: hidden;
}

.project-container {
  min-width: 80%;
  position: absolute;
  right: 15%; /* 原right:85%等价于left:15%，可根据实际布局需求调整 */
  /* 如需垂直定位可添加top/bottom属性 */
}

内容的提问来源于stack exchange，提问作者Alexis P.