[Webkit-unassigned] [Bug 214040] New: Incorrect height of element with percentage height inside button that is inside a flex container

[bugzilla-daemon at webkit.org]

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

            Bug ID: 214040
           Summary: Incorrect height of element with percentage height
                    inside button that is inside a flex container
           Product: WebKit
           Version: Safari 13
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: robertknight at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 403682

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

HTML/CSS test case

A div with percentage height inside a `<button>` which is itself contained in a flex layout is sized differently in Safari than in Chrome and Firefox. In Chrome/FF the percentage height is respected. In Safari it behaves as if the element had auto height. Changing the `<button>` for a generic `<div>` element resolves the issue and results in consistent rendering across browsers.

Steps to reproduce: See attached test case in Safari and compare with Chrome and Firefox. In Chrome/Firefox the button's content fills the button vertically. In Safari it does not. Instead it behaves as if it had `height: auto`.

I tested with Safari 13.1 and Safari Tech Preview Release 109.

This may be related to https://bugs.webkit.org/show_bug.cgi?id=205447.
Downstream bug report: https://github.com/hypothesis/client/issues/2302#issuecomment-654632234

-- 
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/20200707/6d68b61c/attachment.htm>