allRowsVisible makes grid claim more space in a row flex container

Description

Setting allRowsVisible on a vaadin-grid that is a flex item in a row flex container makes it claim the container's full width, squeezing its siblings to nothing.

grid1.allRowsVisible = false	grid1.allRowsVisible = true
Both grids 414px wide	Grid 1 = 836px, grid 2 = 2px

The cause is width: 100% in the :host([all-rows-visible]) rule in:

• packages/grid/src/styles/vaadin-grid-base-styles.js
• packages/vaadin-lumo-styles/src/components/grid.css

For base styles the declaration was explicitly added in https://github.com/vaadin/web-components/pull/10687, to fix an all-rows-visible grid not stretching in a vertical layout.

Expected outcome

allRowsVisible should only affect the grid's height.

Minimal reproducible example

<style>
  #layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 8px;
  }
  #layout > vaadin-grid {
    flex-grow: 1;
  }
</style>

<div id="layout">
  <vaadin-grid id="grid-1">
    <vaadin-grid-column path="name" header="Grid 1"></vaadin-grid-column>
  </vaadin-grid>
  <vaadin-grid id="grid-2">
    <vaadin-grid-column path="name" header="Grid 2"></vaadin-grid-column>
  </vaadin-grid>
</div>
<button id="toggle">Toggle all rows visible</button>

<script type="module">
  import '@vaadin/grid/all-imports';

  const grid1 = document.querySelector('#grid-1');
  const grid2 = document.querySelector('#grid-2');

  grid1.items = [{ name: 'foo' }, { name: 'bar' }];
  grid2.items = [{ name: 'baz' }, { name: 'qux' }];

  document.querySelector('#toggle').addEventListener('click', () => {
    grid1.allRowsVisible = !grid1.allRowsVisible;
  });
</script>

Steps to reproduce

1. Add the snippet above to an HTML page and open it in a 900px wide window.
2. Note that both grids are 414px wide.
3. Click "Toggle all rows visible".
4. Note that grid 1 is now 836px wide and grid 2 has collapsed to 2px.

Environment

Vaadin version(s): 25.3.0-alpha13, also reproduces in 24.9
OS: macOS

Browsers

Issue is not browser related

Start with the :host([all-rows-visible]) rule in packages/grid/src/styles/vaadin-grid-base-styles.js and packages/vaadin-lumo-styles/src/components/grid.css. Reproduce the issue using the provided two-grid row flex layout, then verify that toggling allRowsVisible changes height without collapsing the sibling grid or changing the expected widths.