为什么材料设计对话框主体在iPad上没有高度

Question

我有一个使用angularjs和material-design的网络应用程序。

我使用md-dialog添加和编辑数据库中的某些记录。这是响应式的，并且在我的桌面上按预期在除IE之外的所有浏览器上工作（不出意外）。这就是应该看的样子。

但是，如果我在Mac上的safari或iOS上的任何浏览器（包括Chrome）上运行该应用程序，则该对话框似乎缺少内容（没有高度）。

虽然IE没有完全相同的问题，但它看起来确实相似。因此，我认为iOS是如何呈现flex属性的问题。但是，我不确定，也不知道如何在我的iPad上确认。

到目前为止，我的搜索没有为此问题提供任何有效的解决方案，但我看到其他人提出了同样的问题（虽然不是通过堆栈）。

导致此问题的原因是什么？ 如何修复iPad？

更新

这是对话框在html中的呈现方式：

<md-dialog-content class="flex" id="dialogContent_140" flex>
    <form name="workerDialog" class="md-dialog-content ng-pristine ng-invalid-required ng-valid-mindate ng-valid-maxdate nd-valid-filtered ng-valid-valid ng-valid-minlength ng-valid-maxlength ng-valid-pattern ng-valid-unique" style>
        ...
    </form>
</md-dialog-content>

如果我修改元素并删除flex，请执行以下操作：

<md-dialog-content class="flex" id="dialogContent_140">

正文内容按预期显示（至少在MAC上）。

我还可以修改angular-material.min.css中的css并移除-webkit-flex，-ms-flex，flex并获得相同的结果。

[flex]{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    box-sizing: border-box;
}

对于应用程序的其他部分，我无法完全杀死flex，但我必须允许它在iPad上运行。

Answer 1

我找到了问题的原因。感谢@Tran Khanh Nguyen让我朝着正确的方向前进。

定义对话框后，有人添加了<md-dialog-content flex>。我删除了flex，它解决了所有设备上的问题。

Answer 2

有关更多信息，使用一些特殊的浏览器（例如IE，IOS浏览器......），我们应该考虑添加flex的值，例如flex="auto"或flex="100"，它会帮助anuglar-material可以在这些浏览器上使用。