使用flex布局时Chromium出现左内边距而Firefox无此问题求助

我使用的操作系统为Manjaro，因此未在Chrome浏览器中测试相关表现。目前遇到的布局问题如下：使用flexbox布局后页面左侧出现额外内边距，该问题仅可在Chromium浏览器中复现，Firefox浏览器中无相同异常。
我暂时未定位到问题来源，目前代码还未开发完成，暂未处理可访问性和响应式相关逻辑，暂时无法确定是否存在其他代码问题。
这是一个Frontend Mentor平台的前端练习挑战项目。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="./styles.css" />

    <title>Frontend Mentor | Stats preview card component</title>
  </head>
  <body>
    <main class="container">
      <div class="hero-image">
        <img src="./images/image-header-desktop.jpg" alt="" srcset="" />
      </div>
      <div class="content">
        <div class="main-header">
          Get <span>insights</span> that help your business grow.
        </div>
        <div>
          Discover the benefits of data analytics and make better decisions
          regarding revenue, customer experience, and overall efficiency.
        </div>
        <div>
          <div>
            <div>10k+</div>
            <div>companies</div>
          </div>
          <div>
            <div>314</div>
            <div>templates</div>
          </div>
          <div>
            <div>12m+</div>
            <div>queries</div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

CSS代码 #

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap");
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(233, 47%, 7%);
  font-size: 15px;
}

.container {
  background-color: hsl(244, 38%, 16%);
  display: flex;
  flex-direction: row-reverse;
}

.main-header {
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

span {
  color: hsl(277, 64%, 61%);
}
.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

该差异来自Chromium和Firefox对flex布局子项默认属性的计算规则不同：

• Chromium内核中flex子项的min-width默认值为auto，会优先按照子内容（此处为图片）的原始宽度计算最小宽度，若图片原始宽度超出flex分配的宽度，就会撑出多余空间
• img为行内替换元素，默认底部存在基线间隙，两个浏览器对该间隙的默认处理逻辑也存在差异，进一步放大了布局偏移

在现有CSS中添加以下规则即可解决问题：

/* 统一flex子项的宽度分配规则 */
.hero-image, .content {
  flex: 1;
  min-width: 0; /* 覆盖Chromium默认的min-width:auto规则，允许子项宽度收缩到分配值以下 */
}

/* 清除图片默认的行内元素间隙，保证图片完全适配容器 */
.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

如果需要让容器不占满全屏，可额外给.container添加固定的最大宽度限制，配合margin属性实现居中即可。

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