Get Child Element to Respect Parent Element Width & Height

How can I make all child divs respect parent's fixed size?

use box-sizing: border-box on the child. This includes the border in the width/height

Set child width relative to its parents height in pure css

Just assign your parent's height property value to a css variable and then use calc() to assign your child element's width to a value that is 10% of your parent's height.

Check and run the Code Snippet below for a practical example of what I have described above:

.parent {
   position: relative;
   --parentHeight: 300px;
   height: var(--parentHeight);
   width: 600px;
   background-color: red;
 }
 .parent .resized {
   height: 100px;
 }

 .child {
   position: absolute;
   height: 20%;
   width: calc(var(--parentHeight) / 10);
   background-color: green;
 }

<div class="parent">
  <div class="child"></div>
</div>

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 doesnt respect parent height

If you want to have a scroller inside that element, you need to have a fixed height for that parent element

.content {
  height: 500px;
  background: #ddd;
}

.wrapper {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-list {
  display: flex;
  margin-top: 24px;
}

.left {
  height: 400px; /* Should have a fixed height here */
  overflow: auto; /* Should be auto instead of `scroll` */
  flex: 0.3;
  background: #6200ff70;
}

.product {
  display: flex;
  height: 60px;
  margin: 8px;
}

If you want to have a scroller for the entire area under content. You can set like this

.content {
  height: 500px;
  overflow: auto;
  background: #ddd;
}

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>

Set Parent Width equal to Children Total Width using only CSS?

I know this is a bit late, but Hope this will help somebody who is looking for similar solution:

<div class="parent" style="display: inline-flex">
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
        </div>

the trick is to use inline-flex for the parent and inline-table for the child. Everything is dynamic. I make the table scrollable horizontally by adding another grandparent with overflow-x:scroll;:

<div class="grandparent" style="width: 300px; overflow-x: scroll; background: gray">
        <div class="parent" style="display: inline-flex">
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
        </div>
    </div>

How to get all parent div height and width separately if their childs are different using javascript

You just need the parent width that you can get either with clientWidth or with getBoundingClientRect() depending on how want width and height calculation relatively to padding/scrollbars:

With getBoundingClientRect():

var sms = [].slice.call(document.getElementsByClassName("s"), 0);sms.forEach(function(e) {  var parentRect = e.parentNode.getBoundingClientRect();  var MW = parentRect.width - (parentRect.width / 1.5);  var MH = parentRect.height - (parentRect.height / 1.5);  e.style.width = MW + 'px';  e.style.height = MH + 'px';});

body {  margin: 0px;}.row {  clear: both;  width: 100pc;}.main,.sq {  float: left;  position: relative;}

<div class="row">  <div class="main" style="width:400px;height:500px;background-color:orange">    <div class="s" style="background-color:black">xfgx</div>  </div>  <div class="sq" style="width:250px;height:500px;background-color:green;">    <div class="s" style="background-color:black;">xfgx</div>  </div></div>

How can I expand floated child div's height to parent's height?

For the parent element, add the following properties:

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

then for .child-right these:

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

Find more detailed results with CSS examples here and more information about equal height columns here.