react-virtualized multigrid scrollbar issue (with JSX support)

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
    <script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/react-virtualized/styles.css">
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div id="example">
      <!-- This element's contents will be replaced with your code... -->
    </div>
    <script src="script.js"></script>
  </body>

</html>


var MultiGrid = ReactVirtualized.MultiGrid;



// Render your list
ReactDOM.render(
  <MultiGrid
    fixedRowCount={1}
    width={400}
    height={300}
    rowCount={1000000}
    columnCount={30}
    rowHeight={30}
    columnWidth={80}
    cellRenderer={
      ({ key, style, rowIndex, columnIndex }) => (
        <div
          className='Cell'
          key={key}
          style={style}
        >
          {rowIndex}:{columnIndex}
        </div>
      )
    }
  />,
  document.getElementById('example')
);

.Cell {
  border-left: 1px solid;
  border-bottom: 1px solid;
}