Why does an absolute position element wrap based on its parent's right bound?

Question

Why does an absolutely positioned element depend on its parent for text wrapping? Doesn't position: absolute remove an element from the flow?

I'm looking to remove this boundary. This is like an implied max-width that I don't want; I want another developer to be able to set this max-width, and not worry about this arbitrary bound. How do I remove this behavior?

For convenience, here is a jsbin.

Answer 1

Doesn't position: absolute remove an element from the flow?

This has nothing to do with the flow. The width of an element always respects its containing block. If the element is absolutely positioned, then its dimensions can be constrained by top, right, bottom and left, but as long as its width is auto then it must still be constrained to the width of its containing block (making it no different from in-flow block boxes in that respect), which in your case is its absolutely-positioned parent. There isn't really any other element whose constraints the absolutely-positioned element could size itself with respect to without compromising the flow of its text.

For the specifics of how this width is calculated, refer to the spec.