css: Set html height to 100% of container

Question

I have an element that can be any size. I need to set the child element to fill the remaining space. I wrote a little demo of my problem. https://www.w3schools.com/code/tryit.asp?filename=GPOS93IXT6E7

  .random-size{
    height:200px;
    width:100px;
    padding:10px;
    background-color:grey;
  }

  .container-fill{
    background-color:red;
    height:100%;
  }

<div class="random-size">
    <div class="container-fill">
        hello world
    </div>
</div>

Outputs:

This is correct for the output for now but if I add another child element https://www.w3schools.com/code/tryit.asp?filename=GPOSB2B28A0I

<div class="random-size">
    <div>uh oh</div>
    <div class="container-fill">
        hello world
    </div>
</div>

The output is now:

As you see there is out of bounds content. I can't use overflow:hidden due to content will be displayed at the bottom. I tried using grids/tables but I could not figure it out. I don't want to resort to using calc.

score 0 · Accepted Answer · answered Apr 19 '21 at 01:25

If you can use display: flex, I'd like to recommend it.

.container{
  width: 300px;
  padding: 16px;
  height: 400px;
  background: gray;
  display: flex;
  flex-direction: column;
}

.box{
  background: red;
  flex-grow: 1;
}

<div class="container">
  <p>some string</p>
  <div class="box">
   BOx
  </div>
</div>

css: Set html height to 100% of container

1 Answers1