Why inline-flex element with clearfix has a weird white space?

Question

I have a weird behaviour of an inline-flex element when applying a clearfix to it. When I set a clearfix to an element which has an inline-flex dis

Answer 1

You have to imagine your page as a flow. Every element of your page is in the flow (DOM). You are using the position property to change the position in the flow.

block

A block element will Always start a new line. (ie: div)

inline-block

Inline blocks elements are blocks like div but with inline properties in it. (ie: span)

inline-flex

This is used the same way as inline-block in the flow. It makes a container that is inline but with the flex layout.

For your example, an interesting thing to do in order to focus on the difference between inline-block and inline-flex is to add text in your child div. You'll see that the comportment of your child div will once again change because it has text in it. JSFiddle example

EDIT : I found a sentence on SO that resumes well the situation. thank's to @BoltClock on This post :

display: inline-flex does not make flex items display inline. It makes the flex container display inline.