Why image inside flexbox doesn't shrink?

Question

I'm trying to set up what I think is a pretty basic flex-box

I have a containing div. Lets say for easy math that it has a max-width: 1000px;. I've set it to display: flex;

Inside of it I have two divs. div1 and div2. I want div2 to always take up the right 300px, with div1 expanding/contracting on the left as the browsers window is resized.

Div1 actually contains a dynamically generated image of text, based on what a user types in (legacy CMS system, don't ask). In other words, it could have a really wide image in it, and I don't know ahead of time how wide the image will actually be. I am running into trouble when the user puts in a lot of text and the image is too wide. IE if the image in div1 ends up being 1500px wide, it causes div1 to be 1500px wide, which pushes div2 out of the containing div.

#container {
  max-width: 1000px;
  display: flex;
}

#div1 {
  flex: 1 1 auto;
}

#div1 img {
  max-width: 100%; /*this doesn't work*/
}

#div2 {
  width: 300px;
  flex: 1 0 auto;
}

How do I force div1 to always respect the max-size, regardless of how big of an image is shoved into it?

Answer 1

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties. - W3C

Chrome has not implemented that yet, but Firefox has it already. What you can do is:

#div1 {
    flex: 1 1 100%;
    min-width: 0; /* for Firefox and future Chrome etc. */
}

#div2 {
    width: 300px;
    flex: 0 0 auto; /* do not grow or shrink the size */
}

JSFIDDLE DEMO