如何从父div的底部堆叠div？

Question

我有这样的代码：

*{
margin: 0 auto;
}

#container{
width: 206px;
}

#content{
display: table-cell;
vertical-align: bottom;
height: 100px;
background-color: brown;
color: white;
border-radius: 5px;
}

.tile{
float: left;
margin: 3px;
padding: 3px;
background-color: white;
color: black;
border-radius: 5px;
}

<div id="container">
<div id="content">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
<div class="tile">4</div>
<div class="tile">5</div>
<div class="tile">6</div>
<div class="tile">7</div>
<div class="tile">8</div>
<div class="tile">9</div>
<div class="tile">10</div>
<div class="tile">11</div>
<div class="tile">12</div>
<div class="tile">13</div>
</div>
</div>

我使用了vertical-align：bottom但是它没有像我想的那样100％工作。它看起来像这样：https://ibb.co/cLD6GQ我期待这样的事情：https://ibb.co/eJ8dVk 你能给我一些建议吗？