Element width when transform: translate() - html

Question

I'm absolute positioning a ul list (but could be any element) at the bottom center of a container.
When window or container is resized, the list shrinks as if it was some kind of margin or padding or max-width applied somewhere. See this fiddle.
Desired effect
I need the list to keep an auto width (depending on its content) and only shrinks when it takes more than 100% of the parent's width.
I've noticed this behavior only happens when transform: translateX(-50%).
EDIT
The wrapper div contains other elements. List acts as a navigation menu or toolbox.
HTML
<div id="wrapper">
<p>Whatever other content</p>
<ul id="list">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#wrapper {
position: relative;
height: 100%;
width: 100%;
background: #fff;
}
#list {
list-style: none;
position: absolute;
padding: 2px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 0;
background: #555;
}
#list li {
display: inline-block;
margin: 1px;
}
#list span {
display: block;
height: 40px;
width: 40px;
background: #222;
}

Answer 1

You can use flexbox to replace the old absolute way of positioning.
#wrapper {
background: #fff;
height: 100%;
width: 100%;
position: relative;
display: flex;
}
#list {
margin: 0;
padding: 0;
list-style: none;
align-self: flex-end;
margin: 0 auto;
border: 1px solid #222;
}
I updated the fiddle http://jsfiddle.net/uLj5raoq/