How to make dynamic width of div containing ul/li?

[PandaPanda]

I created a dynamic organizational chart using the css3-family-tree code.
http://thecodeplayer.com/walkthrough/css3-family-tree

The issue is, if the width of the chart gets larger than the browser window, it gets messed up by staying the same size as the windows and scrambling the structure instead of extending the flow of the window with a scroll bar. fiddle: http://jsfiddle.net/euwx9qvq/

What I'm trying to do is to get the DIV to be the right size dynamically without hard coding a width in the CSS and have the scroll bar scroll to the exact size and not more.

[PandaPanda]

I was able to fix it by adding this to the li of the tree

display: inline-block;
white-space: nowrap;
vertical-align: top;
margin: 0 -2px 0 -2px;
text-align: center;