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

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.