Safari上没有出现CSS行，在Chrome上运行正常

Question

https://jsfiddle.net/suunyz3e/190/ - 如果你在Safari中查看那个小提琴，并将窗口调整到相当小的尺寸，你会发现这些行相互重叠...当我想要的是“TEST TEST TEST”时出现在“GO GO GO”之上（这是它在Chrome上的完美表现）。

这个问题让我发疯，如果有人知道我怎么解决这个问题，我真的很感激。我正在使用Angular Material作为框架。感谢。

<div ng-app="sandbox">
  <div layout="row" layout-xs="column">
    <div flex-gt-xs="30" flex-xs="100">
      TEST TEST TEST
    </div>       
    <div flex-gt-xs="70" flex-xs="100">
      GO GO GO
    </div>
  </div>
</div>

Answer 1

试试这个：

.layout-xs-column > .flex-xs-100 {
  flex: 1 1 auto;
}

https://jsfiddle.net/naayt/6vfdzxho/2/