title: CSS Parent Div height: auto, Child height 100%, but height is 0px
body: <p>I have a sidebar menu and i have a toggle button, but i have a Div that is the parent div of the sidebar, and the height is set to 'auto' by a Node Package.</p>
  
  <pre><code>&lt;div _ngcontent-cle-1="" class="sidebar in collapse" style="overflow: visible; transition-duration: 500ms; height: auto;" aria-expanded="true" aria-hidden="false"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>if the  height was set to 100%, the div goes to the bottom of the screen, which is what is needed. But because of 'auto' being forced in then the height only goes as high as the amount of items within the .</p>
  
  <p>To counter this I have tried to add a child 
   to force the height of the parent div to the bottom.</p>
  
  <p>I have tried multiple css tricks such as display: table and display: table-row, but the div just stays at 0px height no matter what.</p>
  
  <p>Also note: any height styling set in the parent div class, just gets over-ridden.</p>
  
  <p><strong>EDIT</strong> it is not a duplicate of another answer, the reason for this is because it has clashing styling from another, which is shortening the height, and i wanted to over-ride it or make the child element be 100% height, thus forcing the parent to extend because of the auto height. Please read the question next time.</p>