diff --git a/.changeset/lucky-doors-wander.md b/.changeset/lucky-doors-wander.md
new file mode 100644
index 0000000000..bc3d141b9c
--- /dev/null
+++ b/.changeset/lucky-doors-wander.md
@@ -0,0 +1,5 @@
+---
+'@frontify/fondue-components': patch
+---
+
+Fix `Textarea` with `autosize` overflowing its container horizontally when the value contains a long word with no spaces.
diff --git a/packages/components/src/components/Textarea/__tests__/Textarea.ct.tsx b/packages/components/src/components/Textarea/__tests__/Textarea.ct.tsx
index c5e6a3c23b..0e4cc43288 100644
--- a/packages/components/src/components/Textarea/__tests__/Textarea.ct.tsx
+++ b/packages/components/src/components/Textarea/__tests__/Textarea.ct.tsx
@@ -120,6 +120,20 @@ test('autosize functionality', async ({ mount }) => {
await expect(component).toHaveAttribute('data-autosize', 'true');
});
+test('autosize does not overflow its container on a long word without spaces', async ({ mount }) => {
+ const longWord = 'Helloeveryoneandwelcometomyveryverylongwordthatissolongthatitwillprobablyoverflowthecontainer';
+ const wrapper = await mount(
+
+
+
+
,
+ );
+ const longWordComponent = wrapper.getByTestId(`${TEXTAREA_TEST_ID}-long-word`);
+ const wrappedBox = await longWordComponent.boundingBox();
+ const singleLineBox = await wrapper.getByTestId(`${TEXTAREA_TEST_ID}-single-line`).boundingBox();
+ expect(wrappedBox?.height ?? 0).toBeGreaterThan(singleLineBox?.height ?? 0);
+});
+
test('render resize handle when resizable', async ({ mount }) => {
const wrapper = await mount();
await expect(wrapper.getByTestId(`${TEXTAREA_TEST_ID}-resize-handle`)).toBeVisible();
diff --git a/packages/components/src/components/Textarea/styles/textarea.module.scss b/packages/components/src/components/Textarea/styles/textarea.module.scss
index a2df7c4cd1..07f02da56a 100644
--- a/packages/components/src/components/Textarea/styles/textarea.module.scss
+++ b/packages/components/src/components/Textarea/styles/textarea.module.scss
@@ -98,6 +98,7 @@
.root[data-autosize='true'] .textareaWrapper::after {
content: attr(data-replicated-value) " ";
white-space: pre-wrap;
+ overflow-wrap: anywhere;
visibility: hidden;
padding-inline-start: sizeToken.get(3);
padding-inline-end: sizeToken.get(3);