Span element with display: inline-flex has greater height than sibling span

Question

While playing with flex container I have noticed that both Chrome and Firefox render it with a height 1px greater than static siblings.

Here is the code:

.container {
  background-color: yellow;
  border: 1px solid red;
}
.main {
  border: 1px solid black;
}
.flex-cont {
  display: inline-flex;
}

<div class="container">
  <span class="main flex-cont">
      This is the flex container, height is 20px
     </span>
  <span class="main">
      This is not the flex container, height is 19px
     </span>
</div>

Fiddle here: http://jsfiddle.net/pzoxfs90/

Does anybody know why is this and how to avoid it?

Answer 1

Your span elements are, by default, inline-level elements.

The initial value of the vertical-align property, which applies to inline-level elements, is baseline. This allows browsers to provide a bit of space below elements to accommodate descenders.

When you apply display: inline-flex to one of the spans you establish a flex formatting context. In this case, the children are blockified, meaning that the behavior is more like a block-level element.

Hence, the vertical-align property no longer applies to span1, but it continues to apply to span2, which is why you still see the descender space.

From the spec (referring to the anonymous box which wraps the text and is the flex item):

4. Flex Items

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

The simplest solution is to make the parent a flex container, which keeps your child elements inline by default, and allows you to set flex properties on both.

.container {
    display: flex;
    background-color: yellow;
    border: 1px solid red;
}

.main {
    border: 1px solid black;
}

<div class="container">
    <span class="main">This is the flex container, height is 20px</span>
    <span class="main">This is not the flex container, height is 19px</span>
</div>

Revised Fiddle

More details:

• Why is there a vertical scroll bar if parent and child have the same height?
• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

Seems to be an display:inline; issue, changing it to display:inline-block; fixes the height difference. Not sure how useful this is though...

body {
  margin: 30px;
} 

.container {
  background-color: yellow;
  border: 1px solid red;
}

.main {
  border: 1px solid black;
  display:inline-block;    
}

.flex-cont {
  display: inline-flex;
}

<div class="container">
 <span class="main flex-cont">
  This is the flex container, height is 20px
 </span>
 <span class="main">
  This is not the flex container, height is 20px
 </span>
</div>