Let the div blocks stack from the bottom up?

First I have a div

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

Then the content inside the appearance idv will be
(data source php while loop fishing mysql)

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

I set the appearance div to be locked at the lower left corner of the screen
Then the content div is used to retrieve mysql using a while loop
Because the appearance div is set to 220px
The content div has an inline-block of 200px, so it will be stacked downwards by itself. Is this right? Problem
But here comes the problem
I want the content to be at the bottom
Because the current situation is because the height of the appearance div is 700px (I want it to have a scroll, so I set it high)
But when content appears
The content div will Start from the top
How to make it start from the bottom and stack up?
I have tried adding

to the appearance div

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

But it doesn’t work

Reply content:

First I have a div

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

Then the content inside the appearance idv will be
(data source php while loop fishing mysql)

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

I set the appearance div to be locked at the lower left corner of the screen
Then the content div is used to retrieve mysql using a while loop
Because the appearance div is set to 220px
The content div has an inline-block of 200px, so it will be stacked downwards by itself. Is this right? Problem
But here comes the problem
I want the content to be at the bottom
Because the current situation is because the height of the appearance div is 700px (I want it to have a scroll, so I set it high)
But when content appears
The content div will Start from the top
How to make it start from the bottom and stack up?
I have tried adding

to the appearance div

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

But it doesn’t work

<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>