为什么 Flexbox 在 chrome 和 firefox 中的表现不同？

Question

我有一个包含两个元素的 div，即弹性盒内的图像和文本。我尝试使用

flex: 1

和

flex: 2

来保持两者之间的比例。 （三分之一用于图像，两个用于文本）。

看起来像这样：

    .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;
    }

<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有错误吗？为什么浏览器行为有所不同？

Answer 1

如果将图像的

min-width

设置为 0，则可以防止拉伸。

我还从 .thumbnail 类中删除了 width: 100% ，并从 .description div 中删除了 flex-direction ，以防止其干扰

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

.thumbnail {
  flex: 1;
  min-width: 0; /* Allows the image to shrink in flex layout */
}

.description {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.description p {
  margin: 0;
}

.actual-output {
  padding: 10px;
}

<div class="actual-output">
  <div class="body">
    <img class="thumbnail" src="https://place-hold.it/300x500" alt="placeholder image" />
    <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>