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

user_13420188 0
Viewed 115

I have the div block as shown below:

<div className={'row ge-container'}>
   <div className={'a-span3 ge-container-navigation'}>
      hello
   </div>
   <div className={'a-span9 ge-container-content'}>
      Okay    
   </div>
</div>

And the css as

.ge-container {
  min-height: 300px;
}
.ge-container-navigation {
  background-color: $light-gray-background;
  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;
}

The child is not inheriting the height of parent. I tried the solution by setting min-height of child to inherit by seeing some answers. But, that fails when the height goes above 300px.

Can anyone help with this

css
2 Answers

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>

user_60768630

You can also try it with javascript/jquery

$('.ge-container-navigation').height($('.ge-container'));

and, if you want it to update itself in rotation mode:

setInterval(function(){
  $('.ge-container-navigation').height($('.ge-container'));
}, 10);

Thanks

user_140088590
Related