overflow: scroll and padding, conceptual problems.

Consider this sample:
https://terrainformatica.com/w3/scroll-browser.htm

It contains two <main> elements.

First one is

main.n1 {
      border:1px solid;
      padding-top:10px;
      padding-left:10px;
      padding-bottom:20px;
      padding-right:20px;
      height:300px;
      width:400px;
       overflow:scroll;
}

Problems (or rather inconsistencies) with it:

1. You see left padding – the content is clearly offset by padding-left value. But you cannot see padding-right offset at all. Why? Where did it go?
2. If to follow the specification then scrollable box (clip area where the content scrolls) shall be set to content edge of the element. But for now in UAs scrollable area is inner border edge minus scrollbars. I am not sure if that is defined anywhere. Any ideas?

Second <main> element:

main.n2 {
       margin-top:1em;
       border:1px solid;
       padding-top:10px;
       padding-left:10px;
       padding-bottom:2000px;
       padding-right:2000px;
       height:300px;
       width:400px;
       overflow:scroll;
       box-sizing: border-box; /* why it gets ignored? */
}

Problem there is: 
1. box-sizing: border-box; is ignored completely. Why border box is so large there? 

The solution of all these problems:

Paddings, when defined on scrollable element, shall be parts of scrollable content.
In other words scrollable content shall include those paddings and 
width/height properties on scrollable element shall define dimensions of inner edge of border box. 

Here is an illustration: https://terrainformatica.com/w3/scrollable-model.png of how it ideally it should look like.

In principle such behavior can be added if to introduce: box-sizing: padding-box; so

{
   box-sizing: padding-box; /*    box-sizing: border-box; */
   overflow:auto;
   width:…;
   height: …; 
}
may trigger such scrolling behavior.

Any other ideas of how to fix that overflow mess?


Andrew Fedoniouk

Richmond, BC, Canada

http://sciter.com