New CSS Flexbox behavior for absolute-positioned children Sample

Available in Chrome 52+ | View on GitHub | Browse Samples

Background

A previous version of the CSS Flexible Box Layout specification set the static position of absolute-positioned children as though they were a 0x0 flex item. The latest version of the spec takes them fully out of flow and sets the static position based on align and justify properties.

The sample CSS and HTML below demonstrate this. Starting with Chrome 52, the green box will be perfectly centered in the red box. In earlier versions of Chrome, the top left corner of the green box will be in the top center of the red box.

CSS Snippet

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container > * {
  position: absolute;
}

In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.

HTML Snippet

<div class="container" style="background:red; width: 200px; height: 200px;">
  <div style="width: 180px; height: 180px; background: green;">
    In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.
  </div>
</div>