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

Confirmed Issue #10547765 • Assigned to Greg W.


Philip G.
Jan 16, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
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.


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