fix: do not expand to full available width (#3506) (#3507)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

packages/menu-bar/src/vaadin-menu-bar.js

@@ -64,7 +64,7 @@ class MenuBar extends ButtonsMixin(InteractionsMixin(ElementMixin(ThemableMixin(
       <style>
         :host {
           display: block;
-          width: 100%; /* make overflow work in flex */
+          align-self: stretch; /* make overflow work in flex */
         }
 
         :host([hidden]) {

packages/menu-bar/test/menu-bar.test.js

@@ -570,3 +570,22 @@ describe('item components', () => {
     expect(Number(style.zIndex)).to.equal(1);
   });
 });
+
+describe('menu-bar in flex', () => {
+  let wrapper;
+  let menu;
+
+  beforeEach(() => {
+    wrapper = fixtureSync(`
+      <div style="display: flex; width: 400px;">
+        <vaadin-menu-bar></vaadin-menu-bar>
+      </div>
+    `);
+    menu = wrapper.firstElementChild;
+    menu.items = [{ text: 'Item 1' }, { text: 'Item 2' }, { text: 'Item 3' }];
+  });
+
+  it('should not expand to full width of the container', () => {
+    expect(menu.offsetWidth).to.be.lessThan(wrapper.offsetWidth);
+  });
+});