2

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?

HTML

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

CSS

.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;
}
Alexander Flenniken
  • 432
  • 4
  • 17
  • 1
    Had a look at the specs, the expected behavior is clearly outlined by the W3C. – TylerY86 Sep 29 '16 at 02:55
  • 1
    This is not a duplicate, `justify-content: space-between;` is not involved at all. – TylerY86 Sep 29 '16 at 02:59
  • @TylerY86, read what it says: **This question already has an answer here:** It's not about the question, it's about the answer. – Michael Benjamin Sep 29 '16 at 02:59
  • I read the answer. I don't see what `justify-content: space-between` has to do with this, or what `position: absolute` has to do with the other one. – TylerY86 Sep 29 '16 at 03:01
  • Your answer doesn't say anything about the W3C spec. Eh whatever. – TylerY86 Sep 29 '16 at 03:03
  • @TylerY86, in Firefox, an absolutely positioned flex item is *not* removed from the normal flow. That's why the red box doesn't cover the offset like in Chrome. In Firefox, an absolutely-positioned flex item is considered an *in-flow* sibling. My answer explains this in more detail in the dupe. It's not a W3C spec issue. It's more of a bug with Firefox. – Michael Benjamin Sep 29 '16 at 03:09
  • @Michael_B The W3C specifically covers the behavior of absolutely positioned children of flex containers (https://www.w3.org/TR/css-flexbox-1/#abspos-items), and current tests show that Firefox is conformant (https://test.csswg.org/harness/results/css-flexbox-1_dev/grouped/section/4.1/), however that is not the case. The tests do not cover these scenarios appropriately. – TylerY86 Sep 29 '16 at 03:14
  • @TylerY86, you can tell from this question alone that not all browsers conform to the spec. – Michael Benjamin Sep 29 '16 at 03:15

1 Answers1

0

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.

TylerY86
  • 3,737
  • 16
  • 29