<!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>