Center vertically with CSS Flexbox

A demo page showing how to align vertically elements using flexbox.
This is the CSS playground of my 'Flexbox vertical centering' article. Please report any bug (or magic trick I missed) in the comment section.

Read first:

• Support: Firefox/Chrome/Safari/Edge (2016+). Internet Explorer 10/11.
• Fluid height containers are simulated with min-height property.
• Note that IE containers with min-height have to be wrapped in another container (+ fix) to work properly (infos).
• Blocks width are left as it is (to observe the impact of flexbox context). Just use width: 100% on a centered block to make it fit the container width.

Summary:

• Text
• Image
• Single block
• Single block + height 100%
• List items
• List items + height 100%

• Note: Take care of flex context. Override by wrapping children in another container.
• Bug: Long text keep displaying in one line in IE10. IE11 ok.

• Note: Take care of flex context. Override by wrapping children in another container.
• Bug: Long text on fixed container is not aligned to top on WebKit browsers (Chrome/Safari/Edge).

• Bug: IE10/11 block is taking 100% height and content is aligned to top.

• Note: Take care of flex context. Override by wrapping children in another container.
• Bug: Long text keep displaying in one line in IE10. IE11 ok.

• Note: Take care of flex context. Override by wrapping children in another container.
• Bug: IE10/11 long text is aligned to top on fixed container.