Advertencia: no tengo ni idea de cuál es el vocabulario de lo que estoy buscando.

Tengo la siguiente página (jsfiddle) que contiene un árbol de nodos (árbol genealógico).

El árbol puede crecer mucho y, en consecuencia, tener una visualización indeseable, para caber en el contenedor div. El límite div en el violín es simulado por:

 .tree { max-width: 500px; }

Me gustaría lograr dos objetivos:

• Asegúrese de que, incluso si el árbol tiene un ancho mayor que el ancho del contenedor, desborda los bordes del div.

He investigado la palabra clave overflow css, pero no entiendo en qué elemento debo ponerla.

Por ejemplo, al colocarlo en la clase de árbol, los nodos se mantienen en el tamaño de div predefinido:

 .tree { max-width: 500px; overflow: scroll; }

• Permita arrastrar el contenido del div (potencialmente desbordado) para navegar por el árbol (que no sé cómo hacer porque primero necesito lograr el punto anterior ... (¿palabra clave arrastrable?))

¿Podría darme una dirección, según mi jsfiddle?