Firefox响应式布局异常：main、footer的.container切换桌面端无法自动缩放

<main> 和 <footer> 元素的 .container 从移动端布局切换到桌面端布局时，无法自动恢复为100%宽度。<header> 元素表现正常，且从桌面端切换到移动端布局时也能正确缩放。

预期结果 #

<main> 和 <footer> 的 .container 可正确缩放，目前仅刷新页面后才会恢复正常尺寸。

现象演示 #

代码片段 #

CSS代码 #

body {
    width: 100%;
    background-color: #eaeaea;
}

header,
main,
footer {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
}

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: calc(100vw - 50px);
  border: 1px solid black;
}

.logo {
    font-weight: 700;
}

.submission {
    margin-left: auto;
    color: white;
    background-color: #1e272e;
    padding: 1rem;
    text-decoration: none;
    border-radius: 2px;
    font-weight: 700;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  border: 1px solid red;
}

.gallery img,
.gallery video {
    width: 100%;
}

.gallery__item {
    position: relative;
}


@media screen and (min-width: 800px) {
    .container {
        width: calc(100vw - 100px);
    }

    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="container">
      <div class="logo">Logo</div>
      <a class="submission" href="">Submit</a>
    </div>
  </header>

  <main>
    <div class="container">
      <div class="gallery">
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />          
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
      </div>
    </div>
  </main>
  
  <footer>
    <div class="container">
      <form class="footer__form">
        <h2>Learn moe</h2>
        <h3>Join newsletter</h3>
        <input type="text" class="footer__input" placeholder="Enter your email address" />
      </form>

      <p>© 2021 Comapny</p>
    </div>
  </footer>

</body>
</html>

附加信息 #

• 运行环境为Firefox开发者版

这个问题不属于Firefox特定的兼容问题，核心是flex布局的默认宽度规则和你的代码设置冲突导致的：

1. 作为flex容器的header、main、footer，其直接子项.container默认的min-width属性值是auto，这意味着容器不会被强制收缩到小于自身内容的宽度。header的内部内容没有固定大尺寸元素，所以缩放正常；但main里的图片栅格、footer里的表单内容最小宽度更大，会把.container撑开，导致你设置的calc(100vw - xx)宽度规则失效，窗口缩放触发断点后，浏览器不会主动重新计算布局，只有刷新后才会恢复正常。
2. 你使用vw作为容器宽度单位也放大了这个问题，vw是相对于视口的单位，窗口拖拽缩放时，flex子项的内容宽度优先级高于你设置的动态宽度，就会出现宽度不跟随更新的现象。

修复方案非常简单，给.container加一行min-width: 0覆盖默认规则即可：

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: calc(100vw - 50px);
    min-width: 0; /* 新增这行 */
    border: 1px solid black;
}

如果担心内容被挤压截断，可以同时给.gallery和footer的表单容器增加overflow-x: hidden属性。

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