Safari Flex 项目不需要的 100% 宽度 CSS

Question

我有一个具有这些属性的元素

.Task-header {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

在 Chrome 中，它的子项的行为与您期望的一样，即彼此之间的空间：

在 Safari 10.1.2 中，每个孩子占据整个宽度，因此它们出现在彼此下方

我需要做什么来修复 Safari 的问题？

编辑：这是 JSX：

<details>
    <summary className="Task-header">
        <h3 className="Task-header-title">{data.Name + " [" + version + "]"}</h3>
        <span className={"mdi mdi-18px " + (data.Status.State === "running" ? "mdi-checkbox-marked-circle" : "mdi-close-circle")}/>
    </summary>
    <h3>{data.Name + " [" + version + "]"}</h3><span></span>
    <div className="Task-body">
        <p>CPU %: <b>{data.cpuUsage}</b></p>
        <p>Mem Usage/Limit: <b>{data.memoryUsage}/{data.memoryLimit}</b></p>
        <p>Mem %: <b>{data.memoryPercent}</b></p>
        <p>Block I/O: <b>{data.blockRead}/{data.blockWrite}</b></p>
        <p>Net I/O: <b>{data.netRead}/{data.netWrite}</b></p>
        <p>{dateString}</p>
    </div>
</details>

儿童 CSS：

.Task-header-title {
    font: 600 .875rem Averta;
    margin: 0;
}

Answer 1

这与 Safari 中的一个 FlexBug 有关，其中某些元素无法成为 flex 父级（请参阅https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers）。摘要标签似乎是这些元素之一。

您可以通过在摘要下嵌套一个 div 来解决此问题，如下所示：

<summary >
  <div className="Task-header">
        <h3 className="Task-header-title">{data.Name + " [" + version + "]"}</h3>
        <span className={"mdi mdi-18px " + (data.Status.State === "running" ? "mdi-checkbox-marked-circle" : "mdi-close-circle")}/>
  </div>
</summary>