Edge incorrectly applies parent's "align-items" to abspos flex children

Confirmed Issue #9637906 • Assigned to Greg W.


Daniel H.
Nov 2, 2016
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


  1. Visit https://jsfiddle.net/6c9xz31x/

In both flex containers, the blue (abspos) child should be at the container’s top left corner. (It shouldn’t be influenced by the second container’s align-items value.)

The blue box is at the bottom in the second container. It’s incorrectly being influenced by “align-items” on the parent.

See discussion on https://bugs.chromium.org/p/chromium/issues/detail?id=661662 (the same bug filed for Chrome/Blink).

As noted in https://github.com/w3c/csswg-drafts/issues/440#issuecomment-244791183 , the intent of the spec is that the parent’s align-items value should be ignored on the abspos child. The spec didn’t always make this clear, but it does now. The CSS Align spec (the canonical definition of align-self and align-items) says the following about align-self:auto:

The ‘auto’ keyword is interpreted as ‘normal’ if the box
is absolutely positioned or has no parent, and as the
computed value of ‘align-items’ on the parent otherwise.

Edge isn’t honoring the first half of that spec-quote.


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Jianyong M.”

      Changed Status to “Confirmed”

    • Noting this spec change occurred post our primary flex update with the initial release of MS Edge. We’ll try to get it addressed as soon as possible, we’ll triage accordingly.

    • Microsoft Edge Team

      Changed Assigned To from “Jianyong M.” to “Greg W.”

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

    Sign in