Flex percentage margin and padding: Incorrect height when using css flex

By design Issue #14517293

Details

Author
Mikhail S.
Created
Nov 3, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Firefox
Found in build #
15.15063
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Edge fails to render properly see https://codepen.io/miksh7/pen/WXrqMz
Chrome/IE10/IE11 are OK, FireFox fails too.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Status to “By design”

    • We resolve percentages in padding- and margin- (top|bottom) based on the height of the container in flex and grid items, which means the padding aspect-ratio hack doesn’t work on them. Firefox does the same. Our behavior is correct per spec.

    • Microsoft Edge Team

      Changed Title from “Incorrect height when using css Flex” to “Flex percentage margin and padding: Incorrect height when using css flex”

    You need to sign in to your Microsoft account to add a comment.

    Sign in