Responsive recipe page using Flexbox

Your solution looks great! Nice work.

As for your question about the height: I dug into it a bit and it's a little complicated but I think it's interesting:

First, when you set a % value for height, the value is based off the height of the "containing block" (in this case, .container). The tricky thing is, by default, the height of an element is based off the height of its content, but changing the height of a child element would change the height of the containing block's content!. So the browser can't know what 60% will actually be!

The spec explains what will happen when you set give an element a % height like this:

"If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'."

In other words, setting a % height on the child of an element without an explicit height does nothing.

The only way it could know what the % will actually resolve to is if the containing block has an explicit height. For example if you had:

.container {
  height: 1000px;
}

But setting explicit heights is likely to cause overflow issues, so you probably shouldn't do that.

Here is a good stack overflow post I read when looking into this.

You can set an explicit max-height on your image, like:

.img {
  max-height: 120px;
}

Or because your image is inside a flex container with flex-shrink: 1 and flex-basis: 0%, it will shrink as the size of the container gets too small to fit all of its content.

Hope this was interesting. Is was for me!

Good luck!