TOC positioning wrt to content in default css

I have been staring at asciidoctor.css for a while trying to figure out how it achieves the position of both of these elements:
the toc with respect to the content.

This is what I know:

For toc-right there is an extra padding-right: 15em,
This is compared with at toc-left which defaults to body.toc2 which has a padding-left: 15em

But I have been trying to figure out how the toc2 and content are positioned with respect to one another to achieve the nice effect of one followed by the other. For example the toc element comes before content (in both cases), so that when the window becomes small enough, the toc pops to the top of the content (nice desirable effect). But I was wondering what makes toc-right show to the right of the content div (conversely for toc-left). And what sets the min window width threshold at which the toc pops to the top of the content.

I looked for different ways of achieving vertical split in css, but they all rely on some form of 'grid' like split of the horizontal space, but I don't think this is happening here, sorry for the newbie question. The closest that comes to this is using a float or a inline-block, both techniques not being used in asciidoctor.css. If you can point out to me how this is done, or can recommend some post/reference to how this is accomplished that would be greatly appreciated.

Related to this question is: what makes the toc independently scrollable wrt to the content?

Thanks in advance.

I will try answer some of my own questions, but please feel free to make corrections:

1. The position is fixed, and setting left:0 or right:0 + top:0 makes the toc on the left and right respectively.

2. The @media screen and (min-width:768px) determines the threshold at which it switches to having a toc at the side(s).


It is still not clear if there is a setting that allows independent scroll bars for each of the div's.  Is this the default behavior, or is it set by some style?

--

Hi Dan,

When the window shrinks, the toc gets a scrollbar, I was wondering what was setting that, I found that it is the

overflow: auto

It is interesting that the content gets the page's scrollbar, while the div for the toc gets its own.
I was wondering how they can operate independently, so the above (overflow) seems to do the
trick.

-frankie

--