html - CSS 行未出现在 Safari 上，在 Chrome 上工作正常

Question

https://jsfiddle.net/suunyz3e/190/ - 如果你在 Safari 中查看那个 fiddle ，并将窗口调整得非常小，你会发现行相互重叠......当我想要的是“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/