indésirables article Flex Safari 100% largeur CSS

Question

J'ai un élément avec ces propriétés

.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; 
} 

Dans Chrome, il est comporte des enfants comme on peut s'y attendre, à savoir l'espace entre eux:

Dans Safari 10.1 .2, chaque enfant occupe toute la largeur et, en tant que tels, apparaissent sous l'autre

Que dois-je faire pour réparer le Safari?

Edit: Voici le 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 sur les enfants:

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

Answer 1

Ceci est lié à un FlexBug dans Safari où certains éléments ne peuvent pas être des parents flex (Voir https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). Les balises de résumé semblent être l'un de ces éléments.

Vous pouvez contourner le problème en imbriquant un div dans votre résumé comme ceci:

<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>