how to make content aligned from the end while able to scroll in a fixed parent
<p>Here is the thing: I want to display some content which can be scrolled in a fixed component. Then I wanna the content to start form bottom, so I set content's class to {position: absolute;bottom:0;}, but the result is that the content can't be scrolled any more.Is there a solution to this problem?</p>

<pre><code>---parent(position fixed)
----contents
-------empty space
-------empty space
-------text
----contents end

after add a text:
---parent(position fixed)
----contents
-------empty space
-------text2
-------text
----contents end

after add more text
---parent(position fixed)
----contents        -
(-------text4(5..and so on)(scroll to see))
-------text3        |
-------text2        able to scroll
-------text         |
----contents end    -
</code></pre>

<p>`</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.shade {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50%;
  overflow: scroll;
}
.content {
  position: absolute;
  bottom: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="shade"&gt;
  &lt;div class="content"&gt;
    &lt;div&gt; 1 &lt;/div&gt;
    &lt;div&gt; 2 &lt;/div&gt;
    &lt;div&gt; 3 &lt;/div&gt;
    &lt;div&gt; 4 &lt;/div&gt;
    &lt;div&gt; 5 &lt;/div&gt;
    &lt;div&gt; 6 &lt;/div&gt;
    &lt;div&gt; 7 &lt;/div&gt;
    &lt;div&gt; 8 &lt;/div&gt;
    &lt;div&gt; 9 &lt;/div&gt;
    &lt;div&gt; 10 &lt;/div&gt;
    &lt;div&gt; 11 &lt;/div&gt;
    &lt;div&gt; 12 &lt;/div&gt;
    &lt;div&gt; 13 &lt;/div&gt;
    &lt;div&gt; 14 &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>