注意事项：这个问题是关于CSS中的一个新特性：aspect-ratio。这个网站上大多数有类似关键字的问题都是关于非常不同的技术。
好的，有一个div，它有以下属性：width，aspect-ratio，和max-height。在它里面有另一个div，它有height: 100%。在桌面Chrome和桌面firefox中很好用。在桌面safari，移动的safari，或移动chrome中不起作用。
下面是它应该是什么样子的（或者至少在桌面Chrome中是这样的）：

的数据
以下是它在移动的Chrome中的外观：

的
下面是代码（jsbin here）：

div {
      box-sizing: border-box;
    }
    .con3 {
      border: 4px solid black;
      width: 200px;
      height: 200px;
    }
    .con2 {
      border: 4px solid violet;
      width: 100%;
      aspect-ratio: 9 / 16;
      max-height: 100%;
    }
    .con1 {
      border: 4px solid skyblue;
      height: 100%;
      aspect-ratio: 9 / 16;
      max-width: 100%;
    }

个字符
很好奇：
1.有人知道这里发生了什么事吗？
1.是否存在与此相关的现有Bug文件？
1.是否有任何变通办法可以在父级上继续使用aspect-ratio？