Full-height Grid stretches Dashboard widgets on Aura

[tomivirkki]

Description

Using a full-height Grid for a Dashboard widget's content behaves differently with Lumo and Aura:

Expected outcome

The widget shouldn't strecth

Minimal reproducible example

<style>
  vaadin-dashboard-layout {
    --vaadin-dashboard-col-min-width: 300px;
    --vaadin-dashboard-col-max-width: 500px;
    --vaadin-dashboard-row-min-height: 300px;
    --vaadin-dashboard-col-max-count: 3;
  }
</style>

<vaadin-dashboard-layout>
  <vaadin-dashboard-widget widget-title="Grid">
    <vaadin-grid style="height: 100%">
      <vaadin-grid-column path="name"></vaadin-grid-column>
    </vaadin-grid>
  </vaadin-dashboard-widget>
</vaadin-dashboard-layout>

<script type="module">
  import '@vaadin/dashboard/vaadin-dashboard-layout.js';
  import '@vaadin/dashboard/vaadin-dashboard-widget.js';
  import '@vaadin/grid';

  document.querySelector('vaadin-grid').items = new Array(100).fill(0).map((_, i) => ({ name: `Item ${i + 1}` }));
</script>

Steps to reproduce

Open a dev page with the above content with Lumo and Aura

Environment

Vaadin version(s): 25

Browsers

No response

[tomivirkki]

The issue is likely caused by #scroller having position: relative in base styles, while on Lumo it's absolute.

[jouni]

The reason for the change from absolute to relative is to support auto-width grids, i.e., a grid that is as wide as the columns in it.