html - Why does width and height of a flex item affect how a flex item is rendered?

Question

An image in a flexbox that has a max-height style appears to render differently depending on whether it has its height and width attributes set.

The one with the attributes, set to the true width/height of the image, renders with its aspect ratio preserved, but the ones without the attributes respects the max-height and appear squashed.

.flex-parent {
  display: flex;
  max-height: 10vh;
}

<div class="flex-parent">
  <img                          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>

question from:https://stackoverflow.com/questions/44878379/why-does-width-and-height-of-a-flex-item-affect-how-a-flex-item-is-rendered

Answer 1

An initial setting of a flex container is align-items: stretch.

That means that flex items will expand across the cross axis of the container.

In a row-direction container, like in the question, the cross axis is vertical.

That means the items (images, in this case) will cover the full height of the container.

However, when a flex item has a defined cross size, that overrides the stretch default.

From the spec:

8.3. Cross-axis Alignment: the align-items and align-self properties

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction.

stretch

If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched.

This is the key language:

If the cross size property of the flex item computes to auto

And this is how the spec defines "cross size property":

The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of width or height that is in the cross dimension.

^{https://www.w3.org/TR/css-flexbox-1/#cross-size-property}

---

So your code appears to be playing out as defined in the spec.

This is what you have:

.flex-parent {
  display: flex;
  max-height: 10vh;
}

<div class="flex-parent">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>