diff --git a/web/src/components/message-item/index.module.less b/web/src/components/message-item/index.module.less
index 01a2f544e..d870c1744 100644
--- a/web/src/components/message-item/index.module.less
+++ b/web/src/components/message-item/index.module.less
@@ -9,6 +9,8 @@
   .messageItemContent {
     display: inline-flex;
     gap: 20px;
+    width: 100%;
+    min-width: 0;
   }
   .messageItemContentReverse {
     flex-direction: row-reverse;
diff --git a/web/src/components/message-item/index.tsx b/web/src/components/message-item/index.tsx
index 066420e41..ab675fc8b 100644
--- a/web/src/components/message-item/index.tsx
+++ b/web/src/components/message-item/index.tsx
@@ -124,7 +124,7 @@ const MessageItem = ({
               ></SvgIcon>
             ))}
 
-          <section className="flex gap-2 flex-1 flex-col">
+          <section className="flex min-w-0 gap-2 flex-1 flex-col">
             {isAssistant ? (
               index !== 0 && (
                 <AssistantGroupButton
diff --git a/web/src/components/next-message-item/index.module.less b/web/src/components/next-message-item/index.module.less
index 17cb36165..1ba3f8481 100644
--- a/web/src/components/next-message-item/index.module.less
+++ b/web/src/components/next-message-item/index.module.less
@@ -10,6 +10,7 @@
     display: inline-flex;
     gap: 20px;
     width: 100%;
+    min-width: 0;
   }
   .messageItemContentReverse {
     flex-direction: row-reverse;