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

<section class="sections">
  <h1>Products</h1>
  <article id="software">
    <div id="software-text">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.</div>
    <div id="software-image">background image goes inside this yellow div &amp; needs to stretch to 100% height</div>
  </article>
</section>

Answer 1

height: 100% doesn't work for children of container with height: auto.

Flexbox

Use flexbox to achieve desired layout. Flex-items (direct children of container with display: flex) will stretch by default, so you can remove height: 100%. Also flex-items don't care about floats. Demo:

#software {
  width: 100%;
  background: pink;
  /* become a flex-container */
  /* its children will be flex-items */
  /* flex-items will stretch by default to maximum height */
  display: flex;
  margin-top: 50px;
}

#software-text {
  background: lightblue;
  width: 45%;
  text-align: left;
}

#software-image {
  background: yellow;
  width: 55%;
}

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

<section class="sections">
  <h1>Products</h1>
  <article id="software">
    <div id="software-text">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.</div>
    <div id="software-image">background image goes inside this yellow div &amp; needs to stretch to 100% height</div>
  </article>
</section>

Table layout

You can achieve the same using table layout (display: table for container and display: table-cell for children). This approach has the best browser support. Demo:

#software {
  display: table;

  width: 100%;
  background: pink;
  margin-top: 50px;
}

#software-text {
  background: lightblue;
  width: 45%;
  text-align: left;
  display: table-cell;
}

#software-image {
  background: yellow;
  width: 55%;
  display: table-cell;
}

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

<section class="sections">
  <h1>Products</h1>
  <article id="software">
    <div id="software-text">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.</div>
    <div id="software-image">background image goes inside this yellow div &amp; needs to stretch to 100% height</div>
  </article>
</section>

Grid

You can make you #software a container and specify column width using CSS grid-template-columns property (move column definition to container). Demo:

#software {
  display: grid;
  grid-template-columns: 45% 55%;
  width: 100%;
  background: pink;
  margin-top: 50px;
}

#software-text {
  background: lightblue;
  text-align: left;
}

#software-image {
  background: yellow;
}

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

<section class="sections">
  <h1>Products</h1>
  <article id="software">
    <div id="software-text">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.</div>
    <div id="software-image">background image goes inside this yellow div &amp; needs to stretch to 100% height</div>
  </article>
</section>

For this to work in IE10+/Edge you just need to specify old syntax properties and manual alignment of grid items (By default IE/Edge will stack all grid items in first cell). Demo:

#software {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 45% 55%;
  grid-template-columns: 45% 55%;
  width: 100%;
  background: pink;
  margin-top: 50px;
}

#software-text {
  background: lightblue;
  text-align: left;
}

#software-image {
  background: yellow;
  /* manual positioning for IE/Edge */
  -ms-grid-column: 2;
}

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

<section class="sections">
  <h1>Products</h1>
  <article id="software">
    <div id="software-text">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.</div>
    <div id="software-image">background image goes inside this yellow div &amp; needs to stretch to 100% height</div>
  </article>
</section>