I am currently using absolute positioning to align a ul list at the bottom center of a container. However, I have noticed that when the window or container is resized, the list seems to shrink as if there is some sort of margin, padding, or max-width applied somewhere. Check out this fiddle for reference.
Objective My goal is to ensure that the list maintains an auto width (depending on its content) and only shrinks when it exceeds 100% of the parent's width.
I have observed this issue occurring specifically when using transform: translateX(-50%).
UPDATE The wrapper div contains additional elements. The list serves as a navigation menu or toolbox.
HTML
<div id="wrapper">
<p>Additional content here</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;
}