title: Make div stick to bottom of its container div after scrolling
body: <p>I'm trying a div (later: #blue-element) to move up while scrolling down and to let it stop moving up at a certain point, even if I continue to scroll.</p>
  
  <p>I have tried to use:</p>
  
  <p>align-self: flex-end; Element stayed at the top.
  bottom: 0px; The element stayed at the bottom the whole time, but it couldn't be scrolled anymore.
  margin-top: auto; It didn't push the element down.
  margin-bottom: auto; It didn't push the child element down.</p>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="brown-container"&gt;
   &lt;div id="green-element"&gt;Some stuff&lt;/div&gt;
   &lt;div id="blue-element&gt;Some stuff&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>#brown-container {
   top: 10%
   height: 80%
  }
  #green-element {
   height: 1000px
  }
  #blue-element {
   code: that did not work;
  }
  </code></pre>
  
  <p>I have a png example below</p>
  
  <p><a href="https://i.stack.imgur.com/wZHzQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wZHzQ.png" alt="enter image description here"></a></p>
  
  <p>The #green-element should scroll normally.</p>