1

I would like two divs to fully extend to the height of the container. Not sure why this is so difficult, but I've tried a few things and can't seem to replicate the solution in this question.

Here's a fiddle

li {
  width: 200px;
  background-color: white;
  height: 35px;
  display: block;
}
.outer {
  height: 100%;
  background-color: gray;
  display: table;
}
.filter-button-name {
  background-color: lightblue;
  display: table-cell;
  height: 100%;
}
.filter-number-label {
  background-color: pink;
  color: purple;
  display: table-cell;
  height: 100%;
}
<li class="filter-item">
  <div class="dropdown">
    <div class="outer">
      <div class="filter-button-name">
        <span>Status</span>
      </div>
      <div class="filter-number-label">
        <span class="label">4</span>
      </div>
    </div>
  </div>
</li>

Any help would be great. Thanks.

Community
  • 1
  • 1
4m1r
  • 12,234
  • 9
  • 46
  • 58

1 Answers1

1

You're missing this:

.dropdown { height: 100%; }

Revised Fiddle

When using percentage heights on elements that are not absolutely positioned, you need to set a height on the parent, as well. See: Working with the CSS height property and percentage values

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701