0

I have the following code:

.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>

My goal is to make grandchild2 fill the button. However, in Safari 12.1.1, grandchild2 becomes bigger than the button probably thinking that its parent is parent. Any workaround ?

See this.

In Chrome and Firefox, grandchild2 fills the button correctly.

jimousse
  • 37
  • 1
  • 8

1 Answers1

0

Your issue is that you have set "child2" to 100% height of the parent container, but "child1" also exists in parent.

If you change child2 to this...

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

..child2 will fill the remainder of parent, rather than being 100% height of the parent.

1amShaw
  • 163
  • 3
  • Thanks for your answer @1amShaw! That makes sense. Here's what you suggested: https://jsfiddle.net/a3qoebjr/1/ <-- there's a cross browser consistency now and `grandchild2` doesn't overflow. However it still doesn't fill the button even with `height: 100%`. Do you know why that is ? Is this a separate issue? – jimousse Dec 19 '19 at 19:01
  • My first instinct was to make the button a flex container to let flexbox deal with the height inheritance until the bottom but there's this known bug with button and flex: https://github.com/philipwalton/flexbugs#flexbug-9 – jimousse Dec 19 '19 at 19:12
  • This https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent answers my question. Applying flex all the way through solves my filling issue described on the comment above ^^ – jimousse Dec 20 '19 at 09:55
  • Excellent! Glad you've sorted. Sorry I didn't have a chance to reply sooner! – 1amShaw Dec 20 '19 at 20:36