Flex Item は display: block になる
Flex Item になっている span 要素に text-overflow 効くのはなんでだろうと思って見ていると、width や height も効くし display が block になっていることに気付いた。display: inline
を指定したとしても変わらない。
当たり前のような気もするが、そのような話を聞いたことは無かったので調べてみたところ仕様だった。
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. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)