未出現在Safari上的CSS行，在Chrome上正常工作

Question

https://jsfiddle.net/suunyz3e/190/ - 如果您在Safari中查看該小提琴，並將窗口大小調整得相當小，則會發現行彼此重疊......當我想要的是爲「測試測試」出現在「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/