Html 包含h3的Flexbox和在Safari中不工作之间使用空格的部分

我正在使用

html标记来创建一个带有标题的可扩展内容区域，但我希望将

部分设置为站点上其他可单击元素的样式。以下是标记的框架：

<details aria-expanded="false">
  <summary>
    <h3>Expandable</h3>
    <section>
      <svg>...</svg>
    </section>
  </summary>
  <p>Lorem ipsum...</p>
</details>

问题在于safari为

提供了容器的宽度，而

也提供了100%的宽度。没有其他浏览器以这种方式处理它

下面是它应该是什么样子：

---

下面是safari上的外观：

反转h3/svg。使svg浮动并重置svg顺序。如果safari拒绝重置摘要显示，这可能是一种解决方法。在IOS safari浏览器上，摘要不受支持

summary {
  display: flex;
  justify-content: space-between;
  background-color: green;
  color: white;
  list-style: none; /* for ff */
  padding: 2em;
} 
summary::-webkit-details-marker {
  display: none; /* for safari */
}