diff --git a/web/src/components/message-item/index.module.less b/web/src/components/message-item/index.module.less
index 01a2f544ee..d870c17440 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 066420e417..ab675fc8bc 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 17cb361650..1ba3f84811 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;