<分区>
html - 仅在 Safari 中使用 flexbox 设置父 div 样式时，包含 span 的相邻 div 重叠
注意:我现在发现这只发生在 Safari 中。它似乎在 OSX 上的 Chrome 中工作。
仅在 .hshow 上设置样式 display: flex; 使两个子 div 并排(连续)，但它们重叠。 show.title 中的文本位于文本“April 6th”之上
我认为这与跨度有关。当 .hshow 的两个子级连续相邻时，如何使它们不重叠？
下面是一个效果示例 - 两个 div，一个包含 span，在样式为 display: flex 的父 div 下。我添加了其他颜色以使效果更明显。 “4 月 6 日”，带有 span 的一侧与第二个 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
最佳答案
一旦我发现这只是 Safari 中的一个错误，答案就更容易找到了。我不知道为什么会这样(感谢 Safari)，但是将 flex 1 0 auto 应用于 .hshow 的第一个 child 可以解决这个问题。
在触控笔/CSS 中...
.hshow
display flex
>div:first-child
flex 1 0 auto
结果:
关于html - 仅在 Safari 中使用 flexbox 设置父 div 样式时，包含 span 的相邻 div 重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36662068/