Flexbox在Chrome与Firefox中表现不同的原因及CSS排查

我用flexbox容器包含图片和文本元素，想通过flex:1和flex:2维持二者1:2的占比（图片1/3，文本2/3），代码如下：

CSS代码 #

.body {
  display: flex;
  flex-direction: row;
}

.thumbnail {
  flex: 1;
  width: 100%;
}

.description {
  flex-direction: column;
  flex: 2;
}
.description p {
  margin: 0;
}

.actual-output {
  padding: 10px;
}

HTML代码 #

<div class="actual-output">
    <div class="body">
      <img class="thumbnail" src="https://place-hold.it/300x500" />
      <div class="description">
        <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
      </div>
    </div>
</div>

在Firefox中缩放页面时，二者能持续维持1:2的比例；但在Chrome中无法实现该效果。请问我的CSS是否存在错误？为何浏览器表现会有差异？

1. CSS存在的问题 #

你的代码有两个关键问题影响了Chrome的布局：

• 图片的width:100%与flex:1逻辑冲突：width:100%让图片尝试占满父容器宽度，但图片作为替换元素有固有宽高比，Chrome会优先保留这个比例，导致flex比例被忽略。
• flex:1的简写隐含flex-basis:auto，这会让Chrome以元素的固有尺寸为基准分配空间，而非严格按比例划分容器宽度。

2. 浏览器差异原因 #

Firefox和Chrome对flex容器中**替换元素（如img、video）**的尺寸计算规则不同：

• Firefox优先遵循flex属性的比例约束，强制元素按flex-grow/flex-shrink的比例分配空间，即使打破元素固有宽高比。
• Chrome则优先保证替换元素的固有宽高比，容器缩小时，图片会先缩小到自身最小可显示尺寸（基于宽高比），之后不再继续缩小，导致文本区域占比被迫扩大，破坏1:2比例。

3. 修正方案 #

调整.thumbnail的CSS，明确flex参数并解除图片的固有尺寸限制：

.body {
  display: flex;
  flex-direction: row;
}

.thumbnail {
  flex: 1 1 0%; /* 明确flex-grow:1, flex-shrink:1, flex-basis:0%，强制按比例分配空间 */
  min-width: 0; /* 允许图片宽度小于固有尺寸 */
  object-fit: cover; /* 保持图片比例的同时填充容器，可根据需求换成contain */
}

.description {
  display: flex; /* 补充缺失的flex容器声明，否则flex-direction不生效 */
  flex-direction: column;
  flex: 2 1 0%;
  padding: 0 10px; /* 可选，避免文本贴紧图片 */
}
.description p {
  margin: 0;
}

.actual-output {
  padding: 10px;
}

修正后，Chrome和Firefox都会严格按照1:2的比例分配容器宽度，缩放时比例保持一致。

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