Child Div that extends to the Full Height of the Parent Div

Question

I am trying to get my child div section to all the way to the top and bottom of the parent div section. Go to the bottom of this Example URL (where the Canadian Flag Stand Up Paddle Boarders are): https://www.lakeshoresup.com/product/pathfinder/ Basically if I set the width larger than 41% I get a small area that doesn't go to the top and bottom of the section.

Code:

    <div class="hero__container container">
       <div class="hero__content-wrapper" style="background-color: rgba(0,0,0,0.2); flex: 60% ; max-width: 60%;">
            <h1 class="hero__title hero__title--big">
  Adrift in the Canadian Rockies</h1>
  <p class="hero__content hero__content--medium">
    Jake and Lyndsay embark on a Lakeshore adventure with their inflatable paddleboards.  </p>
          <div class="primary-link">
            <a href="https://www.lakeshoresup.com/2015/07/28/adrift-in-the-canadian-rockies-with-jake-lyndsay-part-1/" class="hero__primary-link btn" target="_blank">
              Read Their Story    </a>
          </div>
        </div>
     </div> 

CSS

.hero--right .container {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.hero__content-wrapper {
    padding-left: 20px;
    padding-right: 20px;
    display: table-cell;
    vertical-align: top;
}

I have tried to add min-height:760px to the css which worked but isn't dynamic. When the site goes to mobile or if the slider boxes are different sizes it breaks the image.

Is there a dynamic way to make the child box (.hero__content-wrapper) always extend to the top of the parent box (.hero__container)?

Is this something that I can use the CSS below and have it function across all browsers or is there a better way to do it?

height: -moz-available;          
height: -webkit-fill-available;
height: fill-available;

Answer 1

I think found a solution to your issue.

.hero__content-wrapper {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     width: 100%;
}

Also to remove the max-width as it will take the width of the parent. You could also add position:relative to the .hero__container class. Does that solve your problem?

Answer 2

Matt -

Let's dilute the example for readability, but essentially create the same thing:

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

CSS:

.container {
  position: relative;
  height: 100px;
  width: 100px;
  border: 1px solid red;
}
.box {
  background: blue;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Here, we just use CSS Position to set the element's reference to the container's dimensions. Then we target the edges of the boundaries with the top:0, etc - That gives us a blue box with unspecified dimensions, filling its parent container.