fix: prevent long chips from exceeding available input width

packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-container.js

@@ -13,6 +13,7 @@ registerStyles(
     #wrapper {
       display: flex;
       width: 100%;
+      min-width: 0;
     }
 
     :host([auto-expand-vertically]) #wrapper {

packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js

@@ -41,6 +41,10 @@ const multiSelectComboBox = css`
     flex: 0 1 auto;
   }
 
+  ::slotted([slot='chip']) {
+    overflow: hidden;
+  }
+
   :host(:is([readonly], [disabled])) ::slotted(input) {
     flex-grow: 0;
     flex-basis: 0;

packages/multi-select-combo-box/test/visual/lumo/multi-select-combo-box.test.js

@@ -146,6 +146,23 @@ describe('multi-select-combo-box', () => {
       element.selectedItems = items;
       await visualDiff(div, 'auto-expand-height');
     });
+
+    it('auto expand long chip', async () => {
+      element.style.maxWidth = '300px';
+      const items = [...element.items];
+      items[0] = 'Super long item that does not fit into input';
+      element.items = element.selectedItems = [items[0]];
+      await visualDiff(div, 'auto-expand-long-chip');
+    });
+
+    it('auto expand long chip clear button', async () => {
+      element.style.maxWidth = '300px';
+      element.clearButtonVisible = true;
+      const items = [...element.items];
+      items[0] = 'Super long item that does not fit into input';
+      element.items = element.selectedItems = [items[0]];
+      await visualDiff(div, 'auto-expand-long-chip-clear-button');
+    });
   });
 
   describe('opened', () => {

packages/multi-select-combo-box/test/visual/material/multi-select-combo-box.test.js

@@ -135,6 +135,23 @@ describe('multi-select-combo-box', () => {
       element.style.maxWidth = '250px';
       await visualDiff(div, 'auto-expand-max-width');
     });
+
+    it('auto expand long chip', async () => {
+      element.style.maxWidth = '250px';
+      const items = [...element.items];
+      items[0] = 'Super long item that does not fit into input';
+      element.items = element.selectedItems = [items[0]];
+      await visualDiff(div, 'auto-expand-long-chip');
+    });
+
+    it('auto expand long chip clear button', async () => {
+      element.style.maxWidth = '250px';
+      element.clearButtonVisible = true;
+      const items = [...element.items];
+      items[0] = 'Super long item that does not fit into input';
+      element.items = element.selectedItems = [items[0]];
+      await visualDiff(div, 'auto-expand-long-chip-clear-button');
+    });
   });
 
   describe('opened', () => {