SafariFlex项目不需要100％宽度的CSS-SafariFlexitemunwanted100%widthCSS

I have an element with these properties

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

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

In Chrome it's children behave as you would expect, i.e. space between each other:

在Chrome中，它的孩子表现得像你期望的那样，即彼此之间的空间：

In Safari 10.1.2, each child takes up the full width and as such they appear below each other

在Safari 10.1.2中，每个孩子都占据了整个宽度，因此它们看起来在彼此之下

What do I need to do to fix the Safari one?

我需要做些什么来修复Safari？

Edit: Here's the JSX:

编辑：这是JSX：

    

        
{data.Name + " [" + version + "]"}
        
    
    
{data.Name + " [" + version + "]"}

    

        
CPU %: {data.cpuUsage}
        
Mem Usage/Limit: {data.memoryUsage}/{data.memoryLimit}
        
Mem %: {data.memoryPercent}
        
Block I/O: {data.blockRead}/{data.blockWrite}
        
Net I/O: {data.netRead}/{data.netWrite}
        
{dateString}
    

CSS on children:

关于儿童的CSS：

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

1 个解决方案

  

        
{data.Name + " [" + version + "]"}