[tabs] Invalid width and no horizontal scroll bar inside vaadin-vertical-layout with material theme

[kasprzakpawel]

Description

When using material theme, placing vaadin-tabs (with the number of tab exceeding the screen width) inside a vaadin-vertical-layout stretches the entire view above its width. When use plain div in place of vaadin-vertical-layout problem doesn't exists.

Expected outcome

When actual viewport does not provide space to display all the tabs, a scroll bar should be displayed without stretching the entire screen as it is done with the lumo theme.

Actual outcome

Stretched view above its width with combination vaadin-tabs & vaadin-vertical-layout.

Browsers Affected

Browser independent (verified as below)

• Chrome
• Firefox
• Safari
• Edge
• iOS Safari
• Android Chrome

[web-padawan]

Confirmed: https://noiseless-caboc.glitch.me/

This problem only affects Material (Lumo tabs have correct overflow with arrow buttons).