Height of flex item is wrong in Safari

Question

In Safari, the element (div.header) with this layout doesn\'t calculate its height. In Chrome it works.

If you open this example in Safari, you will see

Answer 1

There's an issue with Safari where you need to define flex-shrink.

Add this to your code:

.header { flex-shrink: 0 }