Child Inside Parent With Min-Height: 100% Not Inheriting Height

Child inside parent with min-height: 100% not inheriting height

This is a reported webkit (chrome/safari) bug, children of parents with min-height can't inherit the height property: https://bugs.webkit.org/show_bug.cgi?id=26559

Apparently Firefox is affected too (can't test in IE at the moment)

Possible workaround:

add position:relative to #containment
add position:absolute to #containment-shadow-left

The bug doesn't show when the inner element has absolute positioning.

See http://jsfiddle.net/xrebB/

Edit on April 10, 2014

Since I'm currently working on a project for which I really need parent containers with min-height, and child elements inheriting the height of the container, I did some more research.

First: I'm not so sure anymore whether the current browser behaviour really is a bug. CSS2.1 specs say:

The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.

If I put a min-height on my container, I'm not explicitly specifying its height - so my element should get an auto height. And that's exactly what Webkit - and all other browsers - do.

Second, the workaround I found:

If I set my container element to display:table with height:inherit it acts exactly the same way as if I'd give it a min-height of 100%. And - more importantly - if I set the child element to display:table-cell it will perfectly inherit the height of the container element - whether it's 100% or more.

Full CSS:

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

The markup:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

See http://jsfiddle.net/xrebB/54/.

Child of parent with min-height:300px is not inheriting parent's height

Please use display: flex; CSS in .ge-container parent.

This code makes a child flex-box of height 100% using CSS only.

.ge-container {
  min-height: 300px;
      display: flex;
}

Updated snippet :-

 .ge-container {
  min-height: 300px;
      display: flex;
}
.ge-container-navigation {
  background-color:red;
  display: inline-block;
  float: left;
  height: inherit;
  margin: 5px 0 0 0;
  padding: 10px 8px 0 8px;
  border: 1px solid $gray;
}
.ge-container-content {
  display: inline-block;
  height: inherit;
}

<div class="row ge-container">
   <div class="a-span3 ge-container-navigation">
      hello
   </div>
   <div className="a-span9 ge-container-content">
      Okay    
   </div>
</div>

Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?

In the first case, you don't have any height defined so it's clear that the precentage height on child will fail.

From the specification:

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

min-height is only a boundary and the height of your element still depend on its content. If you will have one that exceed 300px the element will have more than 300px

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
  padding:10px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 400px;
  animation:change 2s linear infinite alternate;
}
@keyframes change{
   from {
     height:100px;
   }
}

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

Make child having x% of parent's height set by min-height

you have to use position: relative to parent and position: absolute to child

.parent {  min-height: 100px;  width: 100%;  background-color: green;  position: relative;}
.child {  width: 30%;  background-color: blue;  position: absolute;}
#c1 {  min-height: inherit;  /* =100% of parent's height*/}
#c2 {  min-height: 80%;}

<div class='parent'>  <div id='c1' class='child'></div></div><br><div class='parent'>  <div id='c2' class='child'></div></div>

Child elements are not contained in viewport height even if parent's height is set to be `100vh`

All that's wrong is that the body element has a default margin of 8px, so this is adding 16px to the height.

To fix ie, you just need to set the margins to 0, so add this to the start of your CSS:

body { margin:0;}

Working Example:

body { margin:0;}

.parent{
  background: #64B5F6;
  height: 100vh;
  display: grid;
  grid-template-columns: 40% 60%;
}

.child1 {
  background: #42A5F5;
  height: 100%;
}

.child2{
  background: #FFEB3B;
  height: 100%;
}

.img1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class='parent'>
  <div class='child1'>
    <img class='img1'src="https://images.unsplash.com/photo-1597594879431-8aecf7c2dd49?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
  <div class='child2'>
    <img class='img2'src="https://images.unsplash.com/photo-1598505628759-67b9346af31c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
</div>

Child Inside Parent With Min-Height: 100% Not Inheriting Height