How do I determine the height of a row?

Question

Specifically, I want to know, in the example below, why setting a height value to the first flex-item changes (actually increases) the height of the first row.

Answer 1

As you are setting flex-wrap: wrap. It might cause quite unexpected behavior of the flex-container when you add elements with various widths and heights in it. So, it gets harder to get the height of the first row as you add new items to flex-container.

In your code flex-container has a specific height of 200px and a width of 400px. That means, no matter how many elements the flex-container includes it will never overflow the given width and height. Every item in the flex-container will try to cover the available space.

Each row will have the height of it the element with the maximum height because of align-items: stretch. That's why setting the height of one item might not always effect to the height of the row.