CSS-only bottom-anchored scrolling area

Well, that title is a mouthful.

This is what Kitty Giraudel said in their blog post with the same name. After reading it, I was immediately wondering if it would be possible to create something similar, but without the need to put the content in reverse order.

What if I throw in an extra <div> between the scrollable region and the actual content, that should be it, right? Putting it to test on CodePen, it worked.

<div class="scrollable-reverse">
	<div class="snap-to-bottom">
		<!-- content -->
	</div>
</div>

.scrollable-reverse {
	display: flex;
	flex-direction: column-reverse;
	overflow: auto;
}
.snap-to-bottom {
	/* nothing needed here */
}

For good measure, I went online to see if someone already had the idea, and I found a comment in the depths of StackOverflow that states: In fact, if you just add a div under container to un-reverse everything.

That comment is from 2017. Fascinating, and a reminder that the Flexible Box Layout has been with us for a long time.

But I discovered another comment an that same StackOverflow page: Doesn’t this solution break text selection? It’s selecting from bottom to top.

I tried, and it does if you do not throw in the additional layer. So one more reason to use the approach the person on StackOverflow and I in this post recommend. Sadly we have to mess up the HTML a bit, but maybe at some point we'll get a CSS way to specify a starting position for scrollable regions.

Until then, for future historians, let it be known that this is the first (and hopefully last) time @CSSence recommended an additional <div>. 🥲