CODEWITHSUNDEEP
htmlcss
BitFunny
BitFunny

Reputation: 367

inner div does not expand to parent's height

I apologize if my question seems similar to others posted on StackOverflow. None of the similar questions seemed to address my particular situation.

I have two child divs inside a parent div. Child-div-2 has a fixed height and this defines the height of the parent div.

How do I make Child-Div-1 size to the height of Child-div-2 and the parent div?

Here is a JSFiddle I created to demonstrate the situation: https://jsfiddle.net/xandercrewz/hb7yvjw0/

I would like the orange container to be automatically sized so that it's height is the same as the green and red containers.

Thanks.

<div class='outer-container-blue'>
  <div class='inner-container-left-orange'>
    inner left
  </div>

  <div class='inner-container-right-red'>
    <div class='inner-container-right-green'>

      <div class='inner-container-right-child'>
        inner1
      </div>
      <div class='inner-container-right-child'>
        inner2
      </div>
      <div class='inner-container-right-child'>
        inner3
      </div>

    </div>
  </div>

</div>

CSS:

  .outer-container-blue {
    width: 800px;
    height: auto;
    background-color: blue;
  }
  .inner-container-left-orange {
    display: inline-block;
    float:left;
    width: 15%;
    background-color: orange;

    /* I would like the orange container to be automatically sized so that  */
    /* it's height is the same as the green and red containers.  */
    height: auto;
  }
  .inner-container-right-red {
    position: relative;
    display: inline-block;
    float:left;
    width: calc(100% - 120px);
    height: auto;
    background-color: red;
  }
  .inner-container-right-green {
    position: relative;
    display: inline-block;
    height: auto;
    background-color: green;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }
  .inner-container-right-child {
    display: inline-block;
    width: 100px;
    height: 25px;
    margin: 10px;
    background-color: yellow;
    border: 5px solid black;
  }

Upvotes: 1

Views: 1106

Answers (2)

ketan
ketan

Reputation: 19341

Use following to your .inner-container-left-orange CSS:

.inner-container-left-orange {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

And overflow: hidden; to 

.outer-container-blue

You can check Here.

Upvotes: 0

Broseph
Broseph

Reputation: 90

You can set a height on the outer container (55px worked for me). Then set height to 100% on the inner container.

Upvotes: 2

Related Questions