Safari flexbox：作为弹性项目的按钮内部的div不能获得适当的高度

Question

我有以下代码：

.parent {
  height: 150px;
  display: flex;
  flex-direction: column;
  background: salmon;
  border: 2px solid black;
}

.child1 {
  background: red;
}

.child2 {
  background: grey;
  height: 100%;
  display: flex;
}

.grandchild2 {
  height: 100%;
  background: pink;
  border: 2px solid blue;
}

.mybutton {
  height: 100%;
  width: 100%;
  background: purple;
}

<div class="parent">
  <div class="child1">
    child 1
  </div>
  <div class="child2">
    <button class="mybutton">
      <div class="grandchild2">
        I'm inside a button
      </div>
    </button>
  </div>
</div>

我的目标是使grandchild2充满按钮。但是，在Safari 12.1.1中，grandchild2变得大于可能认为其父级是parent的按钮。任何解决方法？

请参见this。

在Chrome和Firefox中，grandchild2正确填充了按钮。

Answer 1

您的问题是您已将“ child2”设置为父容器的高度的100％，但在父级中也存在“ child1”。

如果您将child2更改为此...

.child2 {
   background: grey;
   display: flex;
   flex-grow: 1
}

.. child2将填充父级的其余部分，而不是父级的100％高度。