How do I add scrollbars to a code element if the line of syntax is longer than the view? I've attempted using overflow: scroll, but it's not functioning as expected.
As shown in the image, using overflow causes the browser to scroll horizontally. https://i.sstatic.net/82yPbzzT.jpg
To see a live demonstration, visit
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 {
}
}
}
}