How to make an image fill a flex item with flex-grow?

Question

I've read through all existing solutions in which images could fill the containing divs but I haven't found a solution for filling a div without a static dimension, such as divs that only have been laid out by flex-grow.

Currently the image will destroy the flex-grow proportions I have set on the container. I want the img to just fill the div and not stretch the div out.

As much as possible I don't want to inline style.

Is there an existing polyfill or solution to this?

.container {
  display: flex;
  min-height: 300px;
  width: 500px;
  flex: 1;
}

.sub-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.sub-container > div {
  flex-grow: 1;
}

.first-container {
  background-color: blue;
}

.second-container {
  background-color: yellow;
}

.second-container>img {
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}

http://jsfiddle.net/jojonarte/tu3nbw4q/

user_3597276 · Answer

You have this in your code:

.sub-container > div {
  flex-grow: 1;
}

Okay, that defines flex-grow.

But you haven't defined flex-basis. As a result, flex-basis keeps its default value, which is: auto (i.e., content-defined).

That's what you're seeing your layout: A flex item that is being sized by the content.

In other words, because the natural dimensions of the image are so large (in comparison to the size of the container), the image is taking up all free space and flex-grow is having no effect (it has no free space to distribute).

As a solution, add this to the rule:

.sub-container > div {
  flex-grow: 1;
  flex-basis: 0; /* new */
}

or, more efficiently:

.sub-container > div {
  flex: 1; /* fg:1, fs:1, fb:0 */
}

revised fiddle

.container {
  display: flex;
  min-height: 300px;
  width: 500px;
}

.sub-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

/* ADJUSTMENT HERE */
.sub-container > div {
  flex: 1;
}

.first-container {
  background-color: blue;
}

.second-container {
  background-color: yellow;
}

.second-container>img {
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}

More information:

To avoid the problem described in the question, as a general rule, use the flex property instead of flex-grow, flex-shrink and flex-basis individually.

From the flexbox specification:

§ 7.2.1. Components of Flexibility

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
Learn more about the difference between flex-basis: auto and flex-basis: 0

user_9140740 · Answer

Use background-image instead use img tag and use background-size: 100% 100%;:

See fiddle

.container {
  display: flex;
  min-height: 300px;
  width: 500px;
  flex: 1;
}

.sub-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.sub-container>div {
  flex-grow: 1;
}

.first-container {
  background-color: blue;
}

.second-container {
      background: url(https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
}

How to make an image fill a flex item with flex-grow?

2 Answers