HTML: Show full content of non-floated element on tree/menu structure

Question

I need to properly skin a menu/tree like structure.

Each item is composed by three elements: two floats (one left and one right) and the last non-floated to fill the remaining space automatically expanding the container when possible.

In the first level all renders properly but on sub-levels the width of container is too small.

NOTE: I need each level ul container will be independently sized based on its content.

HTML example structure:

<ul>
  <li>
    <div class="link">
      <span></span>
      <span>3434</span>
      <span>Item 1</span>
    </div>
    <ul>
      <li>
        <div class="link">
          <span></span>
          <span>123</span>
          <span>Item 1.2</span>
        </div>
      </li>
      <li>
        <div class="link">
          <span></span>
          <span>312</span>
          <span>Item 1.2342342</span>
        </div>
      </li>
      <li>
        <div class="link">
          <span></span>
          <span>12</span>
          <span>Item 1.2234123</span>
        </div>
      </li>
    </ul>
  </li>
  <li>
    <div class="link">
      <span></span>
      <span>3453</span>
      <span>Item 2123123123123123123</span>
    </div>
  </li>
  <li>
    <div class="link">
      <span></span>
      <span>34534</span>
      <span>Item asdasdasd</span>
    </div>
  </li>
</ul>

CSS:

ul {
  position: absolute;
  background: white;
  border: 1px solid black;
  overflow: visible;
  margin: 0;
  padding: 0;
}

li {
  position: relative;
  margin: 0;
  padding: 0.1em 0.5em;
}

ul>li>ul {
  left: 100%;
}

.link {
  display;
  block;
  position: relative;
}

.link>span:nth-child(1) {
  display: block;
  float: left;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background: cyan;
}

.link>span:nth-child(2) {
  display: block;
  float: right;
  height: 1em;
  margin-left: 0.25em;
  background: red;
  color: white;
}

.link>span:nth-child(3) {
  display: block;
  white-space: nowrap;
  overflow: auto;
}

Here a jsfiddle to better show the problem

Answer 1

You can increase the width of the .ul>.li>.ul element:

ul>li>ul {
  left: 100%;
  width:100%;
}

This will make it increase to be the same width as the top level menu:

https://jsfiddle.net/dxr76e1z/1/

Answer 2

You could render inner <ul> as a table and it will autosize to fit its contents:

ul>li>ul {
  left: 100%;
  display: table;
}

Answer 3

Finally I have found the solution using flexbox model. This method preserve also jQuery animations.

Only CSS update is needed:

ul {
  display: block;
  position: absolute;
  list-style: none;
  background-color: orange;
  border: 1px solid red;
  padding: 0.2em;
}

li {
  display: block;
}

ul>li>ul {
  left: 100%;
}

.link {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  margin: 0.2em;
}

.link>span {
  display: block;
  align-self: auto;
}

.link>:nth-child(1) {
  flex-shrink: 0;
  width: 1em;
  background-color: cyan;
  margin-right: 0.25em;
}

.link>:nth-child(2) {
  order: 1;
  flex-shrink: 0;
  background-color: red;
  margin-left: 0.25em;
  white-space: nowrap;
  color: white;
}

.link>:nth-child(3) {
  flex-basis: 100%;
  flex-shrink: 1;
  background-color: yellow;
  white-space: nowrap;
}

Here the updated jsfiddle .