Ha, woof. OK: tl;dr: set flex-shrink: 0; on the div that has the image in it.

There's a lot of gotchas to making display: flex stuff size the way you want it to. In your case here:

- You've set a width for the flex-item div that contains the image: ok, cool! IIRC that becomes the default flex-basis for that flex item. That's its starting width.
- But flex-shrink defaults to 1, so if the contents of that div don't push back, the other flex items can steal space from it.
- The global image shrink CSS makes it so images can't push back on their flex item parents; therefore that flex item goes tiny.
- But if you use flex-shrink: 0 to say this flex item can't be stolen from, then you're fine and the image will fill the available width.

Here on DW, the image might still shrink a bit if someone's browser height would be too short to display the whole thing. But that's what the new click-to-zoom thing is for.

Anyway, keeping an eye on flex-shrink should serve you well everywhere; hopefully that also clears up how it interacts with the image shrink thing.