---
feature_name: CSS Flexbox: New behavior for absolute-positioned children
chrome_version: 52
feature_id: 6600926009753600
---

<h3>Background</h3>
<p>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.</p>

<p>The sample CSS and HTML below demonstrate this. Starting with Chrome 52 or later, the green box will be perfectly centered in the red box. In other browsers, the top left corner of the green box will be in the top center of the red box.</p>

{% capture css %}
/*  */
.container {
	display: flex;
	align-items: center;
	justify-content: center;
}
.container > * {
	position: absoulte;
}
{% endcapture %}
{% include css_snippet.html css=css %}

{% capture html %}
<div style="background:red; width: 200px; height: 200px;">
  <div style="width: 180px; height: 180px; background: green;">
    <p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
  </div>
</div>
{% endcapture %}
{% include html_snippet.html html=html %}

---
feature_name: CSS Flexbox: New behavior for absolute-positioned children
chrome_version: 52
feature_id: 6600926009753600
---

<h3>Background</h3>
<p>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.</p>

<p>The sample CSS and HTML below demonstrate this. Starting with Chrome 52 or later, the green box will be perfectly centered in the red box. In other browsers, the top left corner of the green box will be in the top center of the red box.</p>

{% capture css %}
/*  */
.container {
	display: flex;
	align-items: center;
	justify-content: center;
}
.container > * {
	position: absoulte;
}
{% endcapture %}
{% include css_snippet.html css=css %}

{% capture html %}
<div class="container" style="background:red; width: 200px; height: 200px;">
  <div style="width: 180px; height: 180px; background: green;">
    <p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
  </div>
</div>
{% endcapture %}
{% include html_snippet.html html=html %}

Add classname to outer div.
Add classname to outer div.
