title: Child div's height not stretching to 100% of parent div's auto height
body: <p>I cannot figure out again why the height of the yellow <code>div</code> is not stretching to <code>100%</code> of the <code>height</code> of the parent container. Yes the parent container’s <code>height</code> is set to <code>auto</code> but the blue <code>div</code>’s <code>height</code> is also <code>100%</code> and has content inside, so I would assume the parent <code>div</code> would also increase in height to accommodate this (and you can see the pink below the yellow div, which is part of the parent). The height is there so why is the yellow <code>div</code> not stretching down to be 100% of the <code>height</code> of the parent <code>div</code>?</p>
  
  <p>I’ve tried displaying the parent <code>div</code> as a <code>table</code> and children <code>div</code>s as table cells. Setting all parent elements to an 100% height suggested by other posts also do not work.</p>
  
  <p>I had this problem the other day which was solved by displaying as table &amp; table cells: <a href="https://stackoverflow.com/questions/45390266/inner-divs-height-not-stretching-down-to-100-size">Inner div&#39;s height not stretching down to 100% size</a></p>
  
  <p>Not sure why the same solution does not work since the principle is the same.</p>
  
  <p>Any help and an explanation would be greatly appreciated.</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>#software {
    width: 100%;
    height: auto; /* HAS TO BE AUTO */
    background: pink;
    float: left;
    margin-top: 50px;
  }
  
  #software-text {
    background: lightblue;
    width: 45%;
    float: left;
    text-align: left;
    height: 100%;
  }
  
  #software-image {
    background: yellow;
    width: 55%;
    float: right;
    height: 100%;
  }
  
  .sections {
    max-width: 960px;
    height: auto;
    background: #0f0;
    margin: 0 auto 50px auto;
    overflow: auto;
  }
  
  h1 {
    border-bottom: 1px solid red;
    background: lightblue;
    display: inline;
    padding: 10px;
    font-size: 25px;
    margin: 30px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="sections"&gt;
    &lt;h1&gt;Products&lt;/h1&gt;
    &lt;article id="software"&gt;
      &lt;div id="software-text"&gt;Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but also the leap
        into electronic typesetting, remaining essentially unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentiall also the leap into electronic typesetting, remaining essentially
        unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentially unchanged.&lt;/div&gt;
      &lt;div id="software-image"&gt;background image goes inside this yellow div &amp;amp; needs to stretch to 100% height&lt;/div&gt;
    &lt;/article&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>