When I have 2 or more instances of vaadin-grid on a page, scrollbars only appear on the first instance. On the other instances, the vertical scrollbar appears only while scrolling the mouse. The horizontal scrollbar never appears (though I can scroll using touch). I can force scrollbars to appear using DevTools to tweak their “hidden” field in CSS, but this value is quickly overwritten. This behavior seems to be new in Chrome version 65. Both grids have scrollbars in Chrome 63 and Firefox.
I haven’t been able to find a way to work around this. Any suggestions?
Here is an example:
http://plnkr.co/edit/1rpYGhFhknLTdPha2h0H?p=preview
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script href="http://element-party.xyz/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="my-custom-element.html">
</head>
<body>
<my-custom-element></my-custom-element>
<my-custom-element></my-custom-element> <!-- no scrollbars! -->
</body>
</html>
my-custom-element.html
<link href='https://cdn.vaadin.com/vaadin-elements/1.2.0/vaadin-grid/vaadin-grid.html' rel='import'>
<dom-module id='my-custom-element'>
<template>
<div style="background: red; height: 300px;">
<vaadin-grid style="height: 100%">
<table>
<colgroup>
<col name="Name" min-width="200">
<col name="Number" min-width="200">
</colgroup>
<thead>
</thead>
<tbody>
<tr>
<td>Project A</td>
<td>10000</td>
</tr>
<tr>
<td>Project B</td>
<td>999999</td>
</tr>
<tr>
<td>Project C</td>
<td>999999</td>
</tr>
<tr>
<td>Project D</td>
<td>999999</td>
</tr>
<tr>
<td>Project E</td>
<td>999999</td>
</tr>
<tr>
<td>Project F</td>
<td>999999</td>
</tr>
<tr>
<td>Project G</td>
<td>999999</td>
</tr>
</tbody>
</table>
</vaadin-grid>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'my-custom-element'
});
</script>