Warning: I have absolutely no idea what the vocabulary is for what I am looking for.

I have the following page (jsfiddle) that contains a tree of nodes (familly tree).

The tree can grow very big and consequently have a undesirable display, to fit into the container div. The div limit in the fiddle is simulated by:

.tree {
    max-width: 500px;
}

I would like to achieve two goals:

• Make sure that, even if the tree has a width bigger than the container witdh, it overflows the div borders.

I have looked into the overflow css keyword, but I do not understand on which element I should put it.

For example, when putting it in the tree class, the nodes keep staying in the predefined div size:

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

• Allow to drag the content of the (potentially overflowed) div in order to browse the tree (which I do not know how to do because I need to achieve the above point first... (dragable keyword ?))

Could you give me direction, based on my jsfiddle ?