Flexbox gets new behavior for absolute-positioned children

A previous version of the CSS Flexible Box Layout specification set the static position of absolute-positioned children as though they were a flex item whose size is 0px by 0px. The latest version of the spec takes them fully out of flow and sets the static position based on align and justify properties. At the time of this writing, Edge and Opera 39 for desktop and Android already support this.

For an example, let's apply some positioning behaviors to the following HTML.

<div class="container">
    <div>
    <p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
    </div>
</div>

We'll add something like this:

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

In Chrome 52 or later, the nested <div> will be perfectly centered in the container <div>.

In non-conforming browsers, the top left corner of the green box will be in the top center of the red box.

If you want to try this for yourself in Chrome or any other browser, download our sample or visit the live demo.