Introduction

I think one of the trickiest parts of Flexbox is heights. I think there are many exceptions we have to memorize. Let me explain this explaining many cases.

Before that, let me define 'container' and 'item'. 'container' is the outer part where 'display: flex' is designated, whereas 'item' is the inner part.

Let me show you two examples first and then explain them.

example 1: a case where the height of the container is designated

example 2: a case where the height of the container is NOT designated

If the Heights of the Items Are Longer Than the Height of the Container

The items will be over the container. [example 1 > item 1, item 2].

If the Height of the Container Is Not Designated

Its height is determined by the highest item's height. [example 2].

If the Heights of the Items Are Not Designated

Their heights are determined by the height of the container. [example 1 > item 3], [example 2 > item 4]

If the Heights of Items Are Designated by Percentage

if the height of the container is designated

The percentage works. But one thing we should be careful is an item will be over the container if box-sizing is content-box and height is 100%. [example 1 > item 2]

if the height of the container is NOT designated

The percentage doesn't work. [example 2 > item 3]