Why is flexbox behaving differently in chrome vs firefox?

I have a div with two elements, an image and text inside a flexbox. I try to maintain the ratio between the two using flex: 1 and flex: 2. (one third for the image, two this for the text).

It looks like this:

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

In firefox, when I resize it, it continues to maintain the 1:2 ratio:

In Chrome, this does not happen:

Is there a mistake in my CSS? Why is there a different in browser behavior?

Solution

To answer specifically why the behavior is different when comparing the same CSS between Chrome and Firefox:

It appears to relate to the fact that in Chrome, <img> tags have overflow: clip; by default. Changing this to overflow:hidden or overflow:auto (depending on your use case I suppose) results in the expected behavior.

Since Chrome 108, the default browser style sheet clips the overflow to the content box with the following rules:

img {
  overflow: clip;
  overflow-clip-margin: content-box;
}

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

.thumbnail {
    flex: 1;
    width: 100%;
    overflow: auto /* the added change */
}

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