table-cell display : content wrap outside of the box

is there a css genius that can explain why this is happening ? My brain is burnt right now.

<ul class="nav">
<li>
  <a href="/home/">
    <span class="icon"></span>
    <span>This is the home page of this site</span>
  </a>
</li>
<li>
  <a href="/contact/">
    <span class="icon"></span>
    <span>This is another page</span>
  </a>
</li>
</ul>

.nav { width:280px;}
.nav li {
    display:table-cell;
    vertical-align: middle;
}
.nav a {
    white-space: nowrap;
}
.nav li a span {
    vertical-align: middle;
    display: inline-block;
    white-space: normal;

}
.nav li a span.icon {
    background: url("http://lorempixel.com/25/25/") no-repeat;
    width:25px;
    height:25px;
}

https://jsfiddle.net/0Ly8fxax/1/

Must be me because I get the same behaviour under Firefox, chrome and safari.

The idea is to have a <ul><li> where li's are display:table-cell. The big picture is an horizontal menu possibly wrapping the text but keeping an icon centered vertically next to it.

The content is a link with white-space:nowrap; so the 2 child inline-blocks stay together while the second inline-block content can wrap.

It does act as it should except the wrapping occur outside the <li>

The whole point of this is basically flexbox with IE support.