My OrgChart tries to wrap; I don't want this

Question

I have an OrgChart made up of nested ul and li elements. A problem arises where as the screen gets smaller, my chart overflows below my actual chart. I don't want that.

I'd like it the create a horizontal scroll option instead to view the content on the right rather than it falling to the abyss.

Here is the CodePen: http://codepen.io/jacob_johnson/pen/xwLmWo

And the relevant CSS:

* {
  margin: 0;
  padding: 0;
}

.tree {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.tree ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

I've tried using nowrap on the li and playing with overflow options on the ul to no avail.

Answer 1

I figured it out. So instead of floating my content I've added display: table to my ul element and display: table-cell to my li element.

* {
  margin: 0;
  padding: 0;
}

.tree {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.tree ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;

  display: table;
}

.tree li {
  /*float: left;*/
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;

  display: table-cell;
  vertical-align: top;
}