Is there any way for "position:absolute" div to retain relative width?

Solution 1:

Add position:relative to your outer div.

update: It works because positions in position: absolute are relative to the first parent that has some positioning (other than static). In this case there was no such container, so it uses the page.

Solution 2:

Yes. Set outer to position: relative.

http://jsfiddle.net/57673/

.outer
{
  width: 50%;
  height: 200px;
  position: relative;
  border: 1px solid red;
}

.inner
{
  width: 100%;
  position: absolute;
  height: 100%;
  border: 1px solid blue;
}

Solution 3:

I had an element that had to be position:absolute in a project and I found that setting width to max-content fixed that for me.
It seems to be well supported across modern browsers. Check this link for more info: Mozilla.org (max-content) .