title: How to Fix CSS div to bottom of parent element?
body: <p>I need to fix child element to bottom of its parent element, in my case I have "Back Button" and need it to bottom of scrollable content so I cannot use <code>position: absolute</code> and <code>bottom: 0</code>, but I can add <code>position: fixed</code> with <code>bottom: 0</code>, but problem is that it is at bottom of window not parent element.</p>
  
  <p>Summary: Fixed button at the bottom of crollable content somewhere on the page</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>results {
   position: relative;
   height: 200px;
   width: 200px;
   border-top: 2px solid gray;
   border-radius: 1px;
   background-color: #424242;
   color: #dfdfdf;
   font-size: 15px;
   font-family: Arial;
   padding: 10px;
   overflow-y: auto;
   overflow-x: hidden;
   max-height: 200px;
   max-width: 200px;
   transition: .5s;
  }
  .return-btn {
   position: absolute;
   height: 30px;
   width: 65px;
    bottom: 10px;
   background-color: tomato;
   color: white;
   border: none;
   border-radius: 1px;
   outline: 0;
   font-size: 16px;
   line-height: 19px;
   cursor: pointer;
   transition: .5s;
  }
  .page {
    padding: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page"&gt;
    &lt;div class="results"&gt;
      &lt;p style="text-align: center;"&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;some text&lt;br&gt;&lt;/p&gt;
      &lt;button class="return-btn"&gt;&lt; Back&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/6VYnK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6VYnK.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/Vkbyx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vkbyx.png" alt="enter image description here"></a></p>