| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Scrollbar overflow test</title> |
| <style> |
| body { width: 333px; } |
| |
| #grid { |
| overflow-y: scroll; |
| overflow-x: hidden; |
| flex: 1; |
| display: flex; |
| } |
| |
| #grid::-webkit-scrollbar { |
| height: 10px; |
| width: 10px; |
| } |
| |
| #grid::-webkit-scrollbar-thumb { |
| background-color: red; |
| border-width: 4px; |
| } |
| |
| #rows { |
| flex: 1; |
| height: 100%; |
| position: relative; |
| } |
| |
| .row { |
| background: blue; |
| height: 50px; |
| } |
| |
| #cols { |
| display: flex; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| } |
| |
| .col { |
| flex: 1; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="grid"> |
| <div id="rows"> |
| <div class="row"></div> |
| <div id="cols"> |
| <div class="col"></div> |
| <div class="col"></div> |
| <div class="col"></div> |
| </div> |
| </div> |
| </div> |
| <p> |
| Tests that subpixel accumulation works for flexbox and that |
| scrollbars do not show unnecessarily. No red should show up above. |
| </p> |
| </body> |
| <html> |
