<span> element refuses to go inline in flexbox

Question

I have a span (.time-pretext) inside a div inside a flexbox a, like this:

<a class="option-container option-edit-time" href="#">
  <div class="option-icon"><canvas id="time-canvas" width="128" height="128"></canvas></div>
  <div class="option-text"><span class="time-pretext">I have</span>60 minutes</div>
</a>

.option-text here gets flex-direction: column, and when I give it that property, the span will only take block display options (block or -webkit-box) and no inline ones (inline-block). Why?

Incidentally, it works fine in the original flexbox implementation (display: -webkit-box). Only in the newest implementation (display: flex) does this come up.

Answer 1

I'm assuming that your .option-text has display:flex (otherwise setting flex-direction on it would make no sense). Given that, the behavior you describe is actually required by the flexbox spec -- children of a flex container are forced to have a block-flavored display type.

Specifically, the spec says:

each child of a flex container becomes a flex item [...] The computed ‘display’ of a flex item is determined by applying the table in CSS 2.1 Chapter 9.7

Source: http://www.w3.org/TR/css3-flexbox/#flex-items

That table it refers to, from CSS 2.1, basically converts non-blocks to blocks.

If you don't want this behavior, just wrap your <span> in a <div>, and then the <div> will play the role of the flex item so that the <span> can keep its display type.

Answer 2

The answer given by @dholbert is naturally correct. However, there is another solution that worked for me for the browsers Chrome, Edge, and Firefox. You have to set the display CSS attribute to contents.

In your case, it is:

span.time-pretext {
    display: contents;
}

Or for a more general solution:

CSS:

span.flex-inline {
    display: contents;
}

HTML:

<a class="option-container option-edit-time" href="#">
  <div class="option-icon"><canvas id="time-canvas" width="128" height="128"></canvas></div>
  <div class="option-text"><span class="flex-inline time-pretext">I have</span>60 minutes</div>
</a>