How to Force Child Div to Be 100% of Parent Div'S Height Without Specifying Parent'S Height

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

Child's `height: 100%;` is not taking parent's full height, why?

Looks like I misunderstood the term containing block, I thought it would be the parent, but not really, there's much more into this.

I had to dig into the W3C standard to find out:

Definition of "containing block"

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.

The containing block in which the root element lives is a rectangle called the initial containing block.

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

...

Make child divs 100% height of parent using flexbox

Here you go.

<div class="columns">
  <div class="col">
    <div class="row">
      <img class="img-1" src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png">
    </div>
    <div class="col">
      <div class="row">
        <img class="img-2" src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png">
      </div>
    </div>
  </div>
</div>

CSS

.columns {
  display: inline-flex;
  width: 100%;
  height: auto;
  background: linear-gradient(rgb(253, 221, 57) 0px, rgb(253, 221, 57) 0px) center bottom / 100% 70% no-repeat;
}

.img-1 {
  width: 50%;
  float: right;
  display: flex;
  flex-wrap: wrap;
}

.img-2 {
  height: auto;
  width: 63%;
  display: flex;
  flex-wrap: wrap;
  float: right;
}

.col {
  display: inline-flex;
}

.row {
  max-width: 48%;
  display: block;
  margin: 0 auto;
}

I get the impression you are teaching yourself and that is wicked awesome! Please keep going!! Also, once you finish writing your layer of HTML, abstract the styles away into CSS classes. Then play around with your CSS until you find the right answer for each element.

I arrived at this solution thusly.

1. Named each column and row col-1, col-2, row-1, row-2, etc.
2. Gave both images a class.
3. Inspected element and stepped through each element one-by-one until I arrived at the answer for each.
4. Moved .col and .row back up the food chain.

For sure, always start in HTML. But once you get a rough sketch going, abstract out to CSS and have some fun.

restrict child div height to parent container height

The overflow you see happens because there is already an element taking up some space of the parent, so height: 100% plus the height of the other element will obviously exceed the parents height.

There are different ways to solve the problem.

I recommend one of these two ways:

• CSS Flexbox
• CSS Grid

However, you can also solve them using these ways:

• CSS calc()
• JavaScript

CSS Flexbox

The parent needs display: flex and flex-direction: column to lay out its children in a column.

The child that should grow to take up the remaining space needs flex-grow: 1.

/* Ignore; only for displaying the example */
* {
  margin: 0;
  font-size: 24px;
}
html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.graph-container, .graph {
  border: 3px solid black;
  box-sizing: border-box;
}

/* The answer */
.graph-container {
  height: 60vh;
  width: 70vw;
  
  display: flex;
  flex-flow: column; /* Shorthand for ('flex-direction' | 'flex-wrap') */
}
.graph {
  flex-grow: 1;
  border-color: red;
}

<div class="graph-container">
  <h1>Graph Container</h1>
  <div class="graph">Graph</div>
</div>

<div style="height: 50px;">  <div style="border: 1px solid red; display: inline-flex; padding: 5px;">    <span style="border: 1px solid blue;">Child 1</span>    <span style="border: 1px solid green; height: 100px; margin-left: 5px;">Child 2</span>  </div></div>

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

#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 & needs to stretch to 100% height</div>  </article></section>