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更改为此...

execute'", "c:/Logstash/logstash/logstash-core/lib/logstash/agent.rb:317:in

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

Safari flexbox：作为弹性项目的按钮内部的div高度不正确

1 个答案: