仅当 parent div 在 Safari 中使用 flexbox 设置样式时，包含 span 的相邻 divs 重叠

Question

注意：我现在发现这只发生在 Safari 中。它似乎在 OSX 上的 Chrome 中工作。

仅在 .hshow 上设置样式 display: flex; 会使两个 child div 并排（连续），但它们会重叠。来自 show.title 的文字覆盖了文字 "April 6th"

我认为这与跨度有关。如何让.hshow的两个children在相邻的一排不重叠？

下面是一个效果示例 - 两个 divs，一个包含跨度，在 parent div 下，样式为 display: flex。我添加了其他颜色以使效果更明显。 "April 6th," 有跨距的一侧与第二个 div 的文本重叠。

关于 SAFARI：

开启 CHROME:

以下内容在Jade/Pug中，但可以读得相当简单HTML。

.hshow
    .hshow__left // IN PICTURE: RED BACKGROUND

        h2.hshow__date
            span.hshow__date__month April
                span.hshow__date__num
                    span.hshow__date__num__num 6
                    span.hsow__date__num__raised th

    .hshow__right // IN PICTURE: GREEN BACKGROUND
        h2.hshow__title= show.title

Answer 1

一旦我发现这只是 Safari 中的一个错误，答案就更容易找到了。我不知道为什么会这样（感谢 Safari），但是将 flex 1 0 auto 应用于 .hshow 的 first-child 解决了这个问题。

在Stylus/CSS...

.hshow
  display flex

  >div:first-child
    flex 1 0 auto

结果：

仅当 parent div 在 Safari 中使用 flexbox 设置样式时，包含 span 的相邻 divs 重叠

Adjacent divs containing spans overlap when parent div is styled with flexbox in Safari only

html

css

safari

flexbox

pug