Geek Answers Handbook

Why doesn't the image inside flexbox shrink?

I am trying to customize what, in my opinion, is a pretty simple flex-box

I have a div. For easy math, let's say that it has max-width: 1000px; . I set it to display: flex;

Inside this, I have two divs. div1 and div2. I want div2 to always occupy the right 300px, with div1 expanding / contracting on the left when the browser window changes.

Div1 actually contains a dynamically generated image of the text, based on what the user enters (outdated CMS, does not ask). In other words, it can have a very wide image, and I don’t know in advance how wide the image will be. I am having problems when the user puts in a lot of text and the image is too large. IE, if the image in div1 ends with a width of 1,500 pixels, this causes div1 to have a width of 1,500 pixels, which pops 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 to make div1 always respect the maximum size, no matter how large the image fits into it?

+6
source share
1 answer

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

Chrome hasn't implemented this yet, but Firefox already has one. 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

+6
source

More articles:


All Articles