Flex容器宽度在两种场景下表现差异的原因咨询

场景1：宽度随视口扩展的Flex容器（gallery） #

对应的HTML代码：

<div class="gallery">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
      <img src="7.jpg">
      <img src="8.jpg">
      <img src="9.jpg">
    </div>

对应的CSS代码：

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

场景2：宽度固定不增长的嵌套Flex容器（input-container） #

对应的HTML代码：

<main>
<section id="input-container">
    <label for="input-decimal">Enter the decimal number</label>
    <input type="text" >
</section>
</main>

对应的CSS代码：

main{
    display:flex;
    align-items: center;
    flex-direction: column;
}
#input-container{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    max-width: 500px;
    margin:0 auto;
    justify-content: center;;
}

差异原因分析 #

核心差异来自两个容器的父容器布局规则和自身宽度计算逻辑：

• 场景1的.gallery：
  div是默认块级元素，块级元素默认宽度为auto，会自动填充父容器（body）的可用宽度，而body宽度随视口变化。虽然设置了max-width:1400px，但在视口宽度小于1400px时，.gallery会跟着视口一起扩展，直到触达max-width限制。flex布局仅控制内部图片排列，不影响容器自身的宽度填充逻辑。

• 场景2的#input-container：
  它是父Flex容器main的子元素，而main采用flex-direction: column + align-items: center布局。在垂直方向的Flex布局中，子元素默认宽度是收缩适配内容，而非填充父容器。即便设置了max-width:500px，但没有添加width: 100%或flex-grow: 1来让它占据父容器可用宽度，因此视口变宽时，它只会保持自身内容宽度（或不超过max-width），不会随视口扩展。

如果想让#input-container也随视口扩展（直到max-width），只需给它添加width: 100%即可，这样它会填充main的可用宽度，随视口同步变化。

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