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?

Your problem is [How can I get FF 33.x Flexbox behavior in FF 34.x?](http://stackoverflow.com/questions/26895349/how-can-i-get-ff-33-x-flexbox-behavior-in-ff-34-x) + `#div2 { flex: 1 0 auto}`. — Oriol, Jul 12 '15 at 12:50

Stickers · Accepted Answer · 2015-07-12T21:52:22.617

8

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

edited Jul 12 '15 at 21:52

answered Jul 10 '15 at 20:25

Stickers

75,527
23
147
186

It isn't a problem with div2 growing or shrinking. It stays the proper size, div1 just pushes it out of the containing div if it's too bog – Taylor Huston Jul 10 '15 at 20:29
2

I updated it, and I guess the problem presents on Firefox only, fixed now. – Stickers Jul 10 '15 at 20:32
I was just about to say, "yeah I just tested and you're right, it does work, in Chrome". Thanks! Silly browser inconsistencies.... – Taylor Huston Jul 10 '15 at 20:40
1

I kept forgetting the ***new*** `min-width` value, sorry about that, good reminder. – Stickers Jul 10 '15 at 20:41
I have not personally tested on IE yet, but I think there won't be any problems, however don't forget to prefix all the flex related rules if you need to support more browsers, especially Apple Safari, see the [support tables](http://caniuse.com/#feat=flexbox). – Stickers Jul 10 '15 at 20:57
Just checked it on your fiddle as well, doesn't work in IE. I BELIEVE I have all of the proper prefixes (using an autoprefixer plugin for Brackets) -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; – Taylor Huston Jul 10 '15 at 21:01
Try change it to `#div1 {flex: 1 1 100%;}` it then works fine on IE11 here. p.s. it's not easy to answer the question, I have to launch the VM to test it on IE :P – Stickers Jul 10 '15 at 21:12

Why image inside flexbox doesn't shrink?

1 Answers1