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/