diff --git a/tedi/components/form/date-picker/date-picker.component.scss b/tedi/components/form/date-picker/date-picker.component.scss
index e37f5bf5..2614d353 100644
--- a/tedi/components/form/date-picker/date-picker.component.scss
+++ b/tedi/components/form/date-picker/date-picker.component.scss
@@ -46,6 +46,7 @@ tedi-date-picker {
 .tedi-date-picker {
   &__input {
     flex: 1;
+    min-width: 0;
     padding-left: var(--form-field-padding-x-md-default);
     font-size: var(--body-regular-size);
     color: var(--form-input-text-filled);
@@ -67,6 +68,7 @@ tedi-date-picker {
     align-items: center;
     align-self: center;
     justify-content: center;
+    min-width: 0;
   }
 
   &__clear {
diff --git a/tedi/components/form/date-picker/date-picker.stories.ts b/tedi/components/form/date-picker/date-picker.stories.ts
index 97ccf32e..a14fde22 100644
--- a/tedi/components/form/date-picker/date-picker.stories.ts
+++ b/tedi/components/form/date-picker/date-picker.stories.ts
@@ -256,3 +256,27 @@ export const WithReactiveForms: StoryObj<DatePickerComponent> = {
     };
   },
 };
+
+export const WithLowWidth: StoryObj<DatePickerComponent> = {
+  render: (args) => {
+    return {
+      template: `
+        <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));">
+          <tedi-date-picker ${argsToTemplate(args)}
+            inputPlaceholder="Select a date..."
+          />
+          <tedi-date-picker ${argsToTemplate(args)}
+            inputPlaceholder="Select a date..."
+          />
+          <tedi-date-picker ${argsToTemplate(args)}
+            inputPlaceholder="Select a date..."
+          />
+          <tedi-date-picker ${argsToTemplate(args)}
+            inputPlaceholder="Select a date..."
+          />
+        </div>
+
+      `,
+    };
+  },
+};