How to get scrollbars on container when syntax in code tag is longer than the view

Question

When displaying syntax in a code element, how can I apply scrollbars if a line of syntax is longer than the view? I've tried overflow: scroll, but it doesn't seem to work how I want it.

As you can see in the picture, overflow causes the browser to scroll horizontal.

To see live demo, check out https://blog.sltech.no/Stein/Article/1

HTML:

<table class="syntax-content-wrap">
    <tr>
        <td class="line-nr-wrap"><span class="nr">6</span></td>
        <td class="syntax-line-wrap"><pre><code>    public DefaultRoute(string controller, string action) : base(Feature.DefaultRoute)</code></pre></td>
    </tr>
</table>   

Sass/CSS:

table.syntax-content-wrap {
    line-height: 1;
    margin-left: 7px;
    margin-top: 11px;

    & td.line-nr-wrap {
        vertical-align: middle;
        width: 44px;

        & > span.nr {
            font-size: 11px;
            font-weight: bold;
        }
    }

    & td.syntax-line-wrap {
        overflow: scroll;
        
        & > pre {
            display: block;
            margin: 0px;

            & > code {
            }
        }
    }
}

Answer 1

Two things:

1. Since you have white-space:pre-line on code elements in Stein.Article.min.css, lines will break at spaces where necessary, so you're less likely to get a line that is long enough to require scrolling (unless you have a very long word). If you want single-line behaviour, use white-space: nowrap instead.
2. Since your pre blocks have no max width, there cannot be overflow; in other words, their content cannot go out of bounds since there are no bounds. Adding a width or max-width will fix that.