Expanding a Parent ≪Div≫ to the Height of Its Children

Expanding a parent div to the height of its children

Try this for the parent, it worked for me.

overflow:auto; 

UPDATE:

One more solution that worked:

Parent:

display: table;

Child:

display: table-row;

How can I expand a child div height to parent height?

You could change display:inline-block to display:flex; to .parent-div

Check demo

Expand height of child div to the height of its parent div

Update .link__wrapper class to this:

.link__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch; /* "stretch" instead of "center" */
  width: 100%;
  min-height: 100%;
}

This will stretch .link__wrapper's children to its height.

Parent div not expanding to children's height

Firstly, you are using height:100%; which in your case is wrong. For an explanation on why not to use height:100%, check this article;

To understand why, you need to understand how browsers interpret
height and width. Web browsers calculate the total available width as
a function of how wide the browser window is opened. If you don't set
any width values on your documents, the browser will automatically
flow the contents to fill the entire width of the window.

But height is calculated differently. In fact, browsers don't evaluate
height at all unless the content is so long that it goes outside of
the view port (thus requiring scroll bars) or if the web designer sets
an absolute height on an element on the page. Otherwise, the browser
simply lets the content flow within the width of the view port until
it comes to the end. The height is not calculated at all. The problem
occurs when you set a percentage height on an element who's parent
elements don't have heights set. In other words, the parent elements
have a default height: auto;. You are, in effect, asking the browser
to calculate a height from an undefined value. Since that would equal
a null-value, the result is that the browser does nothing.

Secondly, to make the outer-div (in this case #innerPageWrapper) wrap around the child elements, you should use overflow:hidden on this wrapper.

For this to successfully work, your child elements must not be position:absolute as you have for #contentMain and #contentSidebar, instead make these floats (float:left and float:right) and after the #contentSidebar div closes, add a <div style="clear:both"></div> to clear floats, allowing the parent to wrap around them perfectly.

I have put the required CSS in this Pastebin, note that you must clear your floats using a div as I mentioned above.

How to expand children div height to parent's height

You can set the parent's height, and then just set each child's height to 100%, and it will have each child have the same height as the parent, even if that expands the parent.

.parent.child:nth-child(1) {background-color: #f00;}.child:nth-child(2) {background-color: #0f0;}.child:nth-child(3) {background-color: #00f;}
.parent {  height: 100px;  background-color: red;}
.child {  height: 100%;}

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

#builder_container {  width: 100%;  /*overflow: auto;*/  position: relative;  padding: 8px;  border: 1px solid #ccc;  margin-bottom: 15px;  display: inline-block;  clear: both;}#builder_contents {  background: #000;  width: 100%;  height: 100%;  position: relative;  display: block;}.builder_img {  width: 100%;  height: auto;}

<div id="builder_container">  <div id="builder_contents">    <img class="builder_img" src="http://coolspotters.com/files/photos/1036167/adidas-st-girls-straw-hat-profile.png" />  </div></div>

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

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