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

vaadin · Mar 1, 2022 · 711bfca · 711bfca · darjag · Mar 4, 2022
1 parent 36dea1b
commit 711bfca
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/packages/menu-bar/src/vaadin-menu-bar.js b/packages/menu-bar/src/vaadin-menu-bar.js
@@ -65,7 +65,7 @@ class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(
       <style>
         :host {
           display: block;
-          width: 100%; /* make overflow work in flex */
+          align-self: stretch; /* make overflow work in flex */
         }
 
         :host([hidden]) {

diff --git a/packages/menu-bar/test/menu-bar.test.js b/packages/menu-bar/test/menu-bar.test.js
@@ -603,3 +603,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);
+  });
+});