diff --git a/src/components/MessageItem.tsx b/src/components/MessageItem.tsx
index 9152c6d..4935245 100644
--- a/src/components/MessageItem.tsx
+++ b/src/components/MessageItem.tsx
@@ -22,7 +22,7 @@ export function MessageItem({ message }: { message: Message }) {
             </ThemeIcon>
           )}
           {message.role === "assistant" && <LogoIcon style={{ height: 32 }} />}
-          <Box sx={{ flex: 1 }} className="markdown">
+          <Box sx={{ flex: 1, width: 0 }} className="markdown">
             <ReactMarkdown children={message.content} />
           </Box>
           <Box>
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
index 45dacb3..a8f6793 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@@ -8,6 +8,7 @@
     }
   }
   pre {
+    overflow-x: auto;
     padding: 8px 12px;
     border-radius: 8px;
   }