CSS styling of pygments HTML

Question

I used the Python library pygments to pygmentized some code to put it on a website I created. I've seen many websites displaying code, but when the code contains a long line, the overflow is simply hidden. I dislike it being hidden and want to make the container scrollable. However, when I add the CSS rules:

.highlighttable {
    margin: auto;
    max-width: 75vw;
}

.highlighttable .code {
    max-width: calc(74vw - 100px);
    overflow: auto;
}

The whole thing looks like this:

I guess the following is happening here:

• The scrollbar is calculated into the size of the .code div element.
• The size of the .code containing div grew
• the div containing the line numbers is somehow vertically in the middle

So I tried to add the following CSS rules:

.linenodiv {
    vertical-align: top;
}

.linenodiv pre {
    vertical-align: top;
}

But to no awail, the line number div is still shifted as shown in the screenshot. The following is the HTML code for the whole table:

<table class="highlighttable">
    <tbody>
        <tr>
            <td class="linenos">
                <div class="linenodiv">
                    <pre>1
2
3
4
5
6</pre>

                </div>
            </td>
            <td class="code">
                <div class="highlight">
                    <pre><span class="k">class</span> <span class="nc">TestClass</span><span class="p">:</span>
<span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="k">pass</span>

<span class="k">def</span> <span class="nf">test_method</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">arg1</span><span class="p">,</span> <span class="n">arg1</span><span class="p">,</span> <span class="n">arg1</span><span class="p">):</span>
<span class="k">print</span><span class="p">(</span><span class="n">arg1</span><span class="p">)</span>
</pre>
                </div>
            </td>
        </tr>
    </tbody>
</table>

I reduced the number of arg1s in this code, because it's only to show the structure of the html code.

How can I shift the line number div back up?

EDIT#1

Here is a jsfiddle

It seems jsfiddle doesn't handle the css overflow property the same way Firefox on my computer does. jsfiddle doesn't render scrollbars for overflow: auto; at all and the issue is not visible there. Instead it jst writes the text outside of the div, as if there was an overflow: visible;

Answer 1

The issue was that I didn't apply

vertical-align: top;

to the correct element. I now applied it to the td with the class .linenos as visible here: enter link description here

Thanks @PDKnight, your input made me check what happens when I apply it to that td element.