This is a pretty common display bug that can be triggered in many ways: [silly Unicode tricks](https://meta.stackexchange.com/questions/240022/a-comment-is-breaking-layout), [long code blocks](https://meta.stackexchange.com/questions/230161/comment-crashes-way-into-hot-questions), [broken MathJax](https://math.meta.stackexchange.com/questions/13603/formatting-bug-long-mathjax-or-code-blocks-break-entire-post-or-page), [missing MathJax delimiters](https://stats.meta.stackexchange.com/questions/1987/rendering-error-comments-with-mathjax-syntax-errors-overflow-their-boxes), [changing the font size in Chrome](https://meta.stackexchange.com/questions/231232/expanded-comments-impossible-to-read-in-chrome) or [in Firefox](https://meta.stackexchange.com/questions/192796/show-more-comments-produces-a-layout-overflow-on-firefox), etc.  It was first reported [a long time ago](https://meta.stackexchange.com/questions/5460/post-overflow), and a server-side kluge was added to "fix" it (occasionally breaking [code embedded in comments](https://codegolf.stackexchange.com/questions/12340/make-stackoverflow-explode-bookmarklet/12825#comment42566_12825) or [very long URLs](https://softwareengineering.meta.stackexchange.com/questions/7195/comment-editor-breaks-some-urls) as a side effect), but it didn't really solve the problem completely.

The common thread in all these bug reports is that they involve some kind of an over-wide unbreakable block of text in a comment, which causes the table that contains the comments to extend to accommodate it, overflowing out of the main content area and into the sidebar.

There's a simple CSS fix that (mostly) solves this bug: just set an explicit `max-width` on the comment text cells:

<!-- language: lang-css -->

    .comment-body {
        max-width: 628px;
        padding-right: 2px; /* kluge to avoid occasional spurious scroll bars on Chrome */
        overflow: auto;
        overflow-y: hidden;
        word-wrap: break-word;
    }

This will cause any over-wide comments to stay within their prescribed bounds, breaking long words if necessary, and acquiring a horizontal scroll bar if even that doesn't help, like this:

![Screenshot 1][1]

----

![Screenshot 2][2]

<sup>(The `padding-right: 2px` kluge is a workaround for what appears to be [an uncommon Chrome bug](https://meta.stackexchange.com/q/240352) causing the horizontal scroll bar to appear even for comments that are not over-wide.  Basically, Chrome's layout algorithm seems to sometimes mis-estimate how wide the table cell should be, and ends up making it one or two pixels too narrow; the extra padding appears to give it enough slack to accommodate such mistakes.)</sup>

**Ps.** This fix is include in the latest version (v1.22) of the [Stack Overflow Unofficial Patch](https://stackapps.com/questions/4486/stack-overflow-unofficial-patch) user script.  (Earlier versions had a slightly different fix, which used `table-layout: fixed` instead.)  The `word-wrap: break-word` feature will be added in SOUP v1.30.  (It's already present in the v1.29 devel branch.)


  [1]: https://i.sstatic.net/scEqV.png
  [2]: https://i.sstatic.net/TSINB.png