[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