How to make one item stay the same size all the time and let only another one shrink when using flexbox

Question

I have a problem when I use a flex container with two items inside. I want the first one to have the same width all the time and I want only the other one to change size according to the width of the flex container. The solution I found seems to work perfectly when I use Mozilla Firefox but not when I use other browsers (Chrome, Brave, Edge...).

This is the HTML:

<div class="hero__container container-primary">
   <div class="hero__content">
      <h1>Are you looking for freelancers?</h1>
      <p class="hero__description body-normal">
         Hire Great Freelancers, Fast. Spacelance helps you hire elite
         freelancers at a moment's notice
      </p>
   </div>
   <img class="hero__image" src="./img/hero-image.png" alt="" />
</div>

This is the CSS:

.hero__container {
  display: flex;
  justify-content: center;
  align-items: center;

  .hero__content {
    width: 634px;
    flex-shrink: 0;
  }

  .hero__image {
    width: 100%;
    max-width: 578px;
  }
}

In Mozilla Firefox it behaves exactly the way I want it to as I manually shrink the width of the screen using Developer Tools. However in Google Chrome, Brave and Microsoft Edge the class="hero__content" element and the class="hero__image" element both overflow the class="hero__container" element. Which is not what I'm looking for.

Here is what it looks like in Mozilla Firefox:

Here is what it looks like in Brave:

Answer 1

By default, the image has a min-width of "auto". If you explicitly set it to 0, this will allow the image to shrink beyond its actual size.

  .hero__image {
    width: 100%;
    max-width: 578px;
    min-width: 0;
  }