Here is some example code that causes some issues for me:

<div style="width: 50px; border: 1px solid red;">
  <div style="display: flex;">
    <div>
      <img src="https://www.princexml.com/images/Prince-logo-footer.png" style="max-width: 100%; height: auto; display: block;" />
    </div>
  </div>
</div>

Browsers resize the image to fit inside the red box (because of `max-width: 100%`), but with Prince the image overflows that outer div. Removing `display:block` from the image prevents the overflow but also seems to make the image disappear entirely.

Hi,

Thanks for the bug report. The problem occurs in our calculation of automatic minimum sizes for flex items; you can switch this functionality off by setting `min-width: 0` on the flex item, which should work around the problem in this case.

If the display is inline then unfortunately it hits a separate bug where cyclic percentages are sometimes not correctly resolved. This results in a flex base size of zero, which does not grow to fill the container since the default value of flex-grow is also zero. You may be able to work around this by explicitly setting `flex-grow: 1` on the flex item.

Please let us know if you encounter any further problems with this.

Cheers,
Mark

Thank you, setting `min-width: 0` helps in this case.

There's another issue I noticed in the case where the flex-direction is set to column:

<style>
  .outer {
    border: 2px solid red;
    padding: 2px;
    width: 700px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .inner {
    max-height: 100%;
    background: green;
  }

  img {
    max-height: 100%;
  }
</style>

<div class="outer">
  <div class="inner">
    <img src="https://picsum.photos/id/237/600/600" />
  </div>
</div>

You'll notice that the `.inner` div is wider than the image, which doesn't happen on both Chrome and Safari. Interestingly Firefox also does this wrong, which I reported here: https://bugzilla.mozilla.org/show_bug.cgi?id=1910290

Edited 29 Jul 2024 by sander