讓div區塊從最下面開始往上堆疊？

首先我有個div

<code><div id="外觀" style="overflow-x:hidden; overflow-y:auto; width:220px; height:700px; position:fixed; bottom:50px; left:50px;">
</div></code>

接著外觀 idv裡面的內容會是
(資料來源 php while循環 撈mysql)

<code><div id="內容" style="z-index:999; width:200px; display:inline-block;">
    <div>
    資料
    </div>
    </div></code>

外觀div 我是設定鎖定在螢幕左下角處
然後內容div 是用while循環撈mysql
因為外觀div設定220px
因此內容div的200px因為有inline-block所以他會自己往下堆疊這沒問題
但問題來了
我想讓內容能夠在最下面
因為現在的情況是因為外觀div高是700px(我要讓他有捲軸所以設定高)
但是當有內容出現時
內容div會從最上面開始
要如何讓他從最下面開始然後往上堆疊?
我有試過在外觀div加上

<code>vertical-align:text-bottom;或vertical-align:bottom;</code>

但是都無效

回覆內容：

首先我有個div

<code><div id="外觀" style="overflow-x:hidden; overflow-y:auto; width:220px; height:700px; position:fixed; bottom:50px; left:50px;">
</div></code>

接著外觀 idv裡面的內容會是
(資料來源 php while循環 撈mysql)

<code><div id="內容" style="z-index:999; width:200px; display:inline-block;">
    <div>
    資料
    </div>
    </div></code>

外觀div 我是設定鎖定在螢幕左下角處
然後內容div 是用while循環撈mysql
因為外觀div設定220px
因此內容div的200px因為有inline-block所以他會自己往下堆疊這沒問題
但問題來了
我想讓內容能夠在最下面
因為現在的情況是因為外觀div高是700px(我要讓他有捲軸所以設定高)
但是當有內容出現時
內容div會從最上面開始
要如何讓他從最下面開始然後往上堆疊?
我有試過在外觀div加上

<code>vertical-align:text-bottom;或vertical-align:bottom;</code>

但是都無效

<style type="text/css">
.outer {
  position: fixed;
  bottom: 50px;
  left: 50px;
  width: 220px;
  height: 200px;
  background-color: #1abc9c;
  overflow: hidden;
}
.inner {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  max-height: 200px;
  overflow-y: auto;
}
</style>
<div class="outer">
  <div class="inner">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
</div>