在设置了宽高比的 div 内使用 height:100% - 某些浏览器中存在错误？

Question

注意：这个问题是关于 CSS 中的新功能：

aspect-ratio

。该网站上具有相似关键字的大多数问题都涉及非常不同的技术。

好的，有一个 div 设置了以下属性：

width

、

aspect-ratio

和

max-height

。它里面是另一个带有

height: 100%

的 div。在桌面 Chrome 和桌面 Firefox 中运行良好。不适用于桌面 Safari、移动 Safari 或移动 Chrome。

它应该是这样的（或者至少在桌面版 Chrome 中看起来是这样）：

这是它在移动 Chrome 中的外观：

这是代码（jsbin在这里）：

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

好奇：

1. 有人知道这里发生了什么吗？
2. 是否存在与此相关的现有错误？
3. 有任何解决方法可以在父级上保留

   aspect-ratio

   的使用吗？

Answer 1

我发现的解决方法是对孩子使用position:absolute。

.con2 {
  position: relative;
}
.con1 {
  position: absolute;
}