Bug 205447 – Div inside a button, which is a flex item, doesn't get the proper height and overflows

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[jimousse]

Created attachment 386097 [details]
Div inside the button overflowing

I have the following code (see below): https://jsfiddle.net/jimousse/u25txw4d/30/

grandchild2 is overflowing from the button. I suspect it is getting its height from "parent".
Not sure if this is a flex bug. But I suspect that the presence of the button prevents the div from seeing its parent layout.
I tried the jsfiddle in Chrome and Firefox and grandchild2 gets, as I would expect, the height of the button.

-------------------------------------

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

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

[Radar WebKit Bug Importer]

<rdar://problem/58119034>

[Ahmad Saleem]

I am not able to reproduce this overflow using Inspector in the attached JSFiddle in Safari 16.3 and STP 163.

Appreciate if someone else can confirm so we can mark this as "RESOLVED CONFIGURATION CHANGED". Thanks!

[alan]

Looks good to me. Thank you!