overflow

dabblet.css

/*	overflow	*/
html { transform: scale(.); } body { transform: scale(.); }
html { height: auto ; overflow-y: visible;/* initial values */
       height: 100% ;!overflow-y: auto   ;
      !height: 100vh;!overflow-y: scroll ;
      !height:1500px;!overflow-y: overlay;
      !height: 400px;!overflow-y: -webkit-marquee;
      !height:   0px;!overflow-y:  hidden;
}
body { height: auto ; overflow-y: visible;/* initial values */
       height: 100% ; overflow-y: auto   ;
      !height: 100vh;!overflow-y: scroll ;
      !height:1500px;!overflow-y: overlay;
      !height: 400px;!overflow-y: -webkit-marquee;
      !height:   0px;!overflow-y:  hidden;
}
main { height: auto ; overflow-y: visible;/* initial values */
      !height: 100% ;!overflow-y: auto   ;
      !height: 100vh;!overflow-y: scroll ;
      !height:1500px;!overflow-y: overlay;
      !height: 400px;!overflow-y: -webkit-marquee;
      !height:   0px;!overflow-y:  hidden;
}

body { margin: 0 auto;}
main { margin: 0 auto; white-space: pre;}
html { color: rgba(255,0,0,.25); }
body { color: rgba(0,255,0,.25); }
main { color: rgba(0,0,255,.25); }
* { padding:2em;border:2em solid; background: currentColor;
transition: .25s linear; box-sizing: border-box;}
main * { border: 0em solid; color: black; background: white; }
/* In a fresh document, the viewport gets its overflow from body
and the used value is "auto"

The viewport gets its overflow from html if html{overflow:!visible}
The viewport gets its overflow from body if html{overflow: visible}

If the viewport's overflow computes to "visible,
	"auto" becomes the used value

The element from which the value is propagated must have a used
value of "visible"

For all elements, the initial value of overflow is "visible"
The overflow property is not inherited by default

All values for html that are set to "inherit" compute to "initial"
http://www.w3.org/TR/CSS2/cascade.html#specified-value

if overflow-x is "hidden" OR "scroll" OR "auto" OR "overlay"
   overflow-y    "visible" becomes "auto"

if overflow-y is "hidden" OR "scroll" OR "auto" OR "overlay"
   overflow-x    "visible" becomes "auto"
*/
/* 
The root element is the html element
http://www.w3.org/TR/html-markup/html.html

The display of the html element 
becomes "table" if it's inline-table
and "block" for block, inline-block, inline and all table values
The same transformation happens if the element has float
http://www.w3.org/TR/css3-box/#the-lsquo

The html element is out-of-flow
http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

For a position: fixed box, the containing block is established
by the viewport
http://dev.w3.org/csswg/css-position-3/#fixed-pos

For a position: absolute html element, the containing block is
a box with the same dimensions as the viewport anchored at
the canvas start
http://dev.w3.org/csswg/css-position-3/#def-cb
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

Percentage height on the html element is relative to the 
initial containing block
http://www.w3.org/TR/CSS2/visudet.html#the-height-property

When the viewport is smaller than the area of the canvas on
which the document is rendered, the user agent should offer a
scrolling mechanism.
http://www.w3.org/TR/CSS21/visuren.html#viewport
*/

dabblet.html

<main>
<div>1. Lorem Ipsum</div>
<div>2. Lorem Ipsum</div>
<div>3. Lorem Ipsum</div>
<div>4. Lorem Ipsum</div>
<div>5. Lorem Ipsum</div>
<div>6. Lorem Ipsum</div>
<div>7. Lorem Ipsum</div>
<div>8. Lorem Ipsum</div>
<div>9. Lorem Ipsum</div>
<div>10. Lorem Ipsum</div>
<div>11. Lorem Ipsum</div>
<div>12. Lorem Ipsum</div>
<div>13. Lorem Ipsum</div>
<div>14. Lorem Ipsum</div>
<div>15. Lorem Ipsum</div>
<div>16. Lorem Ipsum</div>
<div>17. Lorem Ipsum</div>
<div>18. Lorem Ipsum</div>
<div>19. Lorem Ipsum</div>
<div>20. Lorem Ipsum</div>
<div>21. Lorem Ipsum</div>
<div>22. Lorem Ipsum</div>
<div>23. Lorem Ipsum</div>
<div>24. Lorem Ipsum</div>
<div>25. Lorem Ipsum</div>
<div>26. Lorem Ipsum</div>
<div>27. Lorem Ipsum</div>
<div>28. Lorem Ipsum</div>
<div>29. Lorem Ipsum</div>
<div>30. Lorem Ipsum</div>
</main>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}