[Webkit-unassigned] [Bug 205447] New: Div inside a button, which is a flex item, doesn't get the proper height and overflows

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Thu Dec 19 06:04:23 PST 2019


https://bugs.webkit.org/show_bug.cgi?id=205447

            Bug ID: 205447
           Summary: Div inside a button, which is a flex item, doesn't get
                    the proper height and overflows
           Product: WebKit
           Version: Safari 12
          Hardware: Macintosh
                OS: macOS 10.15
            Status: NEW
          Severity: Minor
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: jim.castex at gmail.com

Created attachment 386097

  --> https://bugs.webkit.org/attachment.cgi?id=386097&action=review

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20191219/a37453f5/attachment.htm>


More information about the webkit-unassigned mailing list