Unknown offset. (inline-flex element + clearfix)

Question

Unknown offset. In the latest versions of Chrome, FF, IE

Please explain that the upper offset (1em)?

Jsfiddle

#a { border:1px solid blue; } #b { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; /* inline-table too */ border:1px solid red; width:50px; height:50px; } #b:after { /* bootstrap clearfix */ display:table; content:''; } 

 <div id="a"><div id="b"></div></div> 

A similar question: Why does the inline-flex element with clearfix have weird empty space?