Flexbox containers do not correctly account for scrollbars when vertically centering items

Issue #10547765 • Assigned to Bogdan B.

Details

Author
Philip G.
Created
Jan 16, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
38.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Items in a flexbox appear to be centered within the offsetHeight of their container instead of the clientHeight.

This happens regardless of the methodology used for vertical centering:

  1. “flex-direction: column” container with “justify-content: center”
  2. “flex-direction: row” container with “align-items: center”
    3: “flex-direction: column” container with auto-margin item
    4: “flex-direction: row” container with auto-margin item

See the attached test case. In all of the vertical centering examples the vertical position of the centered item is off by roughly half a scrollbar size.

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Ibrahim O.”

    Changed Assigned To from “Ibrahim O.” to “Bogdan B.”

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

Sign in