当父div在Safari中仅使用flexbox设置样式时，包含跨度的相邻div重叠

Question

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

仅在display: flex;上设置样式.hshow会使两个子div并排（连续），但它们会重叠。来自show.title的文字在“4月6日”的文字上

我认为这与跨度有关。当.hshow的两个孩子连续相邻时，我怎么能不重叠？

下面是一个效果的示例 - 两个div，一个包含跨度，在父div下的样式为display: flex。我添加了其他颜色以使效果更明显。 “4月6日”，有跨度的一面，在第二个div的文本下重叠。

ON SAFARI：

ON 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的第一个孩子可以解决问题。

在Stylus / CSS中......

.hshow
  display flex

  >div:first-child
    flex 1 0 auto

结果：