Child div's height not stretching to 100% of parent div's auto height

Question

I cannot figure out again why the height of the yellow div is not stretching to 100% of the height of the parent container. Yes the parent container’s height is set to auto but the blue div’s height is also 100% and has content inside, so I would assume the parent div 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 div not stretching down to be 100% of the height of the parent div?

I’ve tried displaying the parent div as a table and children divs as table cells. Setting all parent elements to an 100% height suggested by other posts also do not work.

I had this problem the other day which was solved by displaying as table & table cells: Inner div's height not stretching down to 100% size

Not sure why the same solution does not work since the principle is the same.

Any help and an explanation would be greatly appreciated.

#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;
}


  Products
  
    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.
    background image goes inside this yellow div & needs to stretch to 100% height

Child div's height not stretching to 100% of parent div's auto height

4 Answers