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

Confirmed Issue #10547765 • Assigned to Greg W.

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.”

    Changed Assigned To from “Bogdan B.” to “Greg W.”

    Changed Status to “Confirmed”

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

Sign in