Alexander Flenniken Alexander Flenniken - 1 year ago 74
CSS Question

Flexbox and Position Absolute Without Top/Bottom in Chome vs. FF & IE

I've discovered a difference in flexbox implementation between Chrome and Firefox/Safari. When you have a position absolute element that has no top/bottom/left/right set, in Chrome the element snaps to top: 0, left: 0, while in the other browsers the top and left values are the same as if the element was statically positioned.

Take a look at the codepen here.

What is the recommendation of the flexbox spec for this situation? Which browser or browsers are demonstrating buggy behavior?


<div class="flex">
<div class="offset">Offset</div>
<div class="absolute">Absolute</div>


.flex {
display: flex;
flex-direction: column;
width: 300px;
background: #eee;
height: 200px;
padding: 8px;
.offset {
width: 300px;
height: 96px;
background: #ccc;
margin-bottom: 8px;
.absolute {
position: absolute;
background: red;
color: white;
width: 300px;
height: 96px;

Answer Source

Yes, this is a difference in layout between Blink and WebKit.

I think the current recommendation would be to either specify the top and left, or use something that has better behavior.

Is nesting the div an acceptable alternative for the current issue?

I think Blink (Chrome) is technically correct here.
Absolutely positioned children should not participate in the flex box layout model.
They should be treated as the starting item in the element.

Edit: They may need to update their test cases - they need to separate Blink and WebKit, and they need this particular overlap test.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download