显示的iOS呈现错误：flex？

我正在使用HTML5显示和摘要元素。我使用自定义标记作为：：before伪元素。summary元素最多可以包含2个span元素

我已经将display:flex（或display:inlineflex）规则应用于summary元素

FF和chrome完全按照预期呈现summary元素——一行，我可以用flex控制伪元素和span元素的宽度

但是，当在我的iPad或iPhone上查看时，summary元素被呈现为一个block或flex-direction:column。伪元素和每个跨度被渲染到新行上

我有非常相似的代码应用于具有相同span元素但伪元素为空的div。iOS在此实例中按预期呈现（弹性方向：行）

我不清楚是什么导致了这种行为，我也很难调试，因为我还没有可以用来开发的iOS设备

<details>
 <summary>
  <span>content</span>
  <span>content</span>
 </summary>
</details>

以下内容在iOS中正确呈现

div {
 display: flex; 
 flex-direction: row; 
 &::before {
  content: '';
  flex: 0 0 $MARGIN;
  cursor: pointer;
 }
}

输出 FF和chrome（将详细信息/摘要呈现为一行）

标记内容

iOS（将详细信息/摘要呈现为列）

标记

内容

---

内容

我决定解决这个问题，而不是继续看是否有解决方案。我没有在summary元素上使用display:flex，而是在span上切换为display:inline块

检测到iOS正在使用

@supports (-webkit-overflow-scrolling: touch) {}

考虑到我不能依赖flex，我不得不使用大量媒体查询来确保合理的渲染。内联块跨度元素必须提前计算其宽度

最后，flex保留在div上（这些div镜像了summary元素，但没有任何子元素）

如果我得到一个更满意的解决方案，我会在这里更新

@supports (-webkit-overflow-scrolling: touch) {}