Question

在Android 4.2.2的内置浏览器中，我在一个大于其height的元素上定义了max-height。所以它按预期使用max-height。

但是有一个100％height的子元素，它似乎继承了其父height而不是max-height。因此，当它打算包含在父级中时，它会溢出父级。

我可以通过将max-height设置复制到子项来解决此问题，但父项的边框/填充仍然会阻止子项完全包含在父项中。

这有充分的理由/解决方法吗？它似乎不会发生在Chrome等其他浏览器上。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .a {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 200px;
        max-height: 50%;
        height: 500px;
        border: 20px solid red;
        box-sizing: border-box;
      }
      .b {
        position: relative;
        width: 100%;
        height: 100%;
        border: 20px solid yellow;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <div class="b">
      </div>
    </div>
  </body>
</html>

Answer 1

您的设置是否可以让孩子成为位置：绝对;？

.b {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  border: 20px solid yellow;
  box-sizing: border-box;
}

在Android 4.2上的子元素中忽略了max-height

1 个答案: