Absolute positioning from bottom not creating overflow scrollbar

Question

When absolute positioning is used and the location uses 'top' the containing div correctly has a vertical scrollbar. But when location uses 'bottom' there is no scrollbar. Run the snippet...

.container {
  height:60px;
  width: 100px;
  border:solid;
  overflow:auto;
  position:relative;
}

Working - has a vertical scrollbar...
        <div class="container">
          <div style="position:absolute; top:0px">Item 1</div>
          <div style="position:absolute; top:20px">Item 2</div>
          <div style="position:absolute; top:40px">Item 3</div>
          <div style="position:absolute; top:60px">Item 4</div>
          <div style="position:absolute; top:80px">Item 5</div>
          <div style="position:absolute; top:100px">Item 6</div>
        </div>

<br/>

Not Working - no vertical scrollbar...
        <div class="container">
          <div style="position:absolute; bottom:0px">Item 1</div>
          <div style="position:absolute; bottom:20px">Item 2</div>
          <div style="position:absolute; bottom:40px">Item 3</div>
          <div style="position:absolute; bottom:60px">Item 4</div>
          <div style="position:absolute; bottom:80px">Item 5</div>
          <div style="position:absolute; bottom:100px">Item 6</div>
        </div>

The DOM flow is left to right, top to bottom, hence when an element overflow at its left or top, no scroll bar appears. If you need it you can e.g. flip the parent and reverse that for the children. — Asons, Dec 22 '18 at 12:21
The flip can be done with `transform`, e.g. add these rules and your first sample will scroll bottom to top: `.container { transform: scaleY(-1) } .container div { transform: scaleY(-1) }` — Asons, Dec 22 '18 at 12:25
Seems a bit over the top , when all you have to do is removing the absolute position to make it work. — Alex Leo, Dec 22 '18 at 12:31
@AlexLeo You missing the point here, the question asks _"Why"_ there is no scroll. If someone want it to scroll from bottom, that is a valid question. — Asons, Dec 22 '18 at 12:33

score 1 · Accepted Answer · answered Dec 19 '18 at 23:06

I can't find any documentation that proves this but, it's my understanding that overflow is calculated from an origin point usually the top left of an element. Negative overflow doesn't trigger a scroll.

So what you see makes sense because your content would have to extend past the bottom of the element to trigger scroll. When you use position: absolute; relative to the bottom it can't overflow that direction by definition.

I think the way to trick it is to have a wrapper with the overflow and all content positioned inside something else.

Absolute positioning from bottom not creating overflow scrollbar

1 Answers1