diff --git a/packages/react/src/components/Chips/Chips.stories.tsx b/packages/react/src/components/Chips/Chips.stories.tsx
index 42510e02e..461a39b28 100644
--- a/packages/react/src/components/Chips/Chips.stories.tsx
+++ b/packages/react/src/components/Chips/Chips.stories.tsx
@@ -26,7 +26,7 @@ const chips = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
 export const Demo: Story = {
   render: (args, context) => {
     return (
-      <Chips key={args.maxLines} style={{ maxWidth: '600px' }} {...args}>
+      <Chips key={args.maxLines} {...args}>
         {chips.map((chip) => (
           <Chip {...args} key={chip}>
             {context.globals.locale === 'ru' ? 'Иванов Иван' : 'John Doe'} {chip}
diff --git a/packages/react/src/components/Chips/Chips.tsx b/packages/react/src/components/Chips/Chips.tsx
index b5673b3d0..3510a2c99 100644
--- a/packages/react/src/components/Chips/Chips.tsx
+++ b/packages/react/src/components/Chips/Chips.tsx
@@ -44,44 +44,45 @@ export const Chips = (inProps: ChipsProps) => {
       return;
     }
 
+    let lineCount = 1;
+    let totalWidth = 0;
+    let hiddenCount = 0;
+
     const chips = ref.current.querySelectorAll('.es-chip');
     chips.forEach((chip) => (chip as HTMLElement).style.removeProperty('display'));
 
-    if (!open) {
-      let lineCount = 1;
-      let hiddenCount = 0;
-      let totalWidth = 0;
-
-      const containerWidth = ref.current.getBoundingClientRect().width;
-      const columnGap = parseInt(window.getComputedStyle(ref.current).columnGap);
-
-      const button = ref.current.querySelector('.es-chips__button') as HTMLButtonElement;
-      const buttonWidth = button.getBoundingClientRect().width;
-
-      setCollapsed(false);
-
-      chips.forEach((chip) => {
-        const chipWidth = chip.getBoundingClientRect().width;
-
-        if (
-          totalWidth + columnGap + chipWidth + (lineCount >= maxLines ? columnGap + buttonWidth : 0) >=
-          containerWidth
-        ) {
-          lineCount += 1;
-          totalWidth = chipWidth;
-        } else {
-          totalWidth += chipWidth + columnGap;
-        }
-
-        if (lineCount > maxLines) {
-          setCollapsed(true);
-          (chip as HTMLElement).style.display = 'none';
-          hiddenCount += 1;
-        }
-      });
-
-      setHiddenCount(hiddenCount);
-    }
+    const containerWidth = ref.current.getBoundingClientRect().width;
+    const columnGap = parseInt(window.getComputedStyle(ref.current).columnGap);
+
+    const button = ref.current.querySelector('.es-chips__button') as HTMLButtonElement;
+    const buttonWidth = button.getBoundingClientRect().width;
+    button.style.display = 'flex';
+
+    chips.forEach((chip, index) => {
+      const chipWidth = chip.getBoundingClientRect().width;
+
+      if (
+        totalWidth +
+          columnGap +
+          chipWidth +
+          (!open && index < chips.length - 1 && lineCount >= maxLines ? columnGap + buttonWidth : 0) >=
+        containerWidth
+      ) {
+        lineCount += 1;
+        totalWidth = chipWidth;
+      } else {
+        totalWidth += columnGap + chipWidth;
+      }
+
+      if (!open && lineCount > maxLines) {
+        (chip as HTMLElement).style.display = 'none';
+        hiddenCount += 1;
+      }
+    });
+
+    setHiddenCount(hiddenCount);
+    setCollapsed(lineCount > maxLines);
+    button.style.display = lineCount > maxLines ? 'flex' : 'none';
   };
 
   useResizeObserver(ref, onResize);
diff --git a/packages/theme/lib/components/_chips.scss b/packages/theme/lib/components/_chips.scss
index 274e29db8..e448c456d 100644
--- a/packages/theme/lib/components/_chips.scss
+++ b/packages/theme/lib/components/_chips.scss
@@ -16,6 +16,8 @@
 
         .es-button-base__wrapper {
           @include typography.level('caption');
+
+          font-variant-numeric: tabular-nums;
         }
       }
     }