CSS3 Problemen mit Ordnerstrucktur-Darstellung

[Paykoman]

Hallo,

ich bekomme meine Ordnerstruktur leider nicht hin wie ich es benötige

Ich habe einen Container #explorer, hier werden mehrere verschiedene Verzeichnisbäume dargestellt.
Separiert durch ein <nav> Element und es wird natürlich immer nur einer angezeigt die anderen sind dann hidden.

<div id="explorer">
    <nav id="vz1" class="wpoTree">
        <li> <!-- content --> </li>
        <li> <!-- content --> </li>
    </nav>
    <nav id="vz2" class="wpoTree">
        <li> <!-- content --> </li>
        <li> <!-- content --> </li>
    </nav>
    <nav id="vz3" class="wpoTree">
        <li> <!-- content --> </li>
        <li> <!-- content --> </li>
    </nav>
</div>

Alle child-ebenen kommen in eine UL.
Der Explorer hat eine fest definierte Größe, da es sich so in die Seite integriert, der Inhalt soll scrolbar sein.
Hier schient es zu Konflikten kommen denn wenn ein Ordner oder Datei einen zu langen namen hat wird ein Zeilenumbruch erzeugt anstatt die Breite der nav zu erhöhen so das es im Container scrolbar wird.

Ich hoffe mir hilft da jemand weiter!
Hier noch jsfiddle


MfG: Paykoman

[dafour]

siehe: https://www.w3schools.com/cssref/pr_...hite-space.asp