Safari上的Flexbox布局无法在移动视图中使用

Question

我正在使用@ angular / flex-layout和@ angular / material作为我的网站，但在使用safari时，我遇到了Smith我的移动布局问题。

仅当窗口小到md或xs规则

时才会发生这种情况

在Chrome上，它看起来像这样：

但在safari上它看起来像这样：

这是一个插入代码的插件： https://embed.plnkr.co/2gh075v8CZ5aU6iA0xYd/

Answer 1

我发现了问题所在。

我必须将flex: 1 0 auto !important;添加到未正确填充的父级。

Answer 2

如果您使用的是@angular/flex-layout，请尝试利用现有的fxFlex选项，而不要使用CSS来覆盖样式。

flex: 1 0 auto !important也可以完成相同的CSS fxFlex="noshrink"

Github fxFlex-API