span 100% height of parent button

Question

I have the following markup

<button class="filter"><div class="radio"><div class="circle"></div></div> <span>Account Management</span></button>

and CSS

.filter {
    font-size: 3vw;
    text-align: left;
    line-height: 1.6;
    padding: 0px;
    display: block;
    height:auto;
    overflow: hidden;
    margin-bottom: 3px;
}
.filter span {
    background: $leithyellow;
    height: 100%;
    overflow:auto;
    display: block;
    width: calc(100% - 60px);
    float: left;
    margin-left:10px;
    padding-left:20px;
}

I cannot get the span to expand to 100% height of the button. Can this be done?

Bonita

Answer 1

Heights apply only if the heights are defined properly for the ancestors. If you want the height to work, that's a tricky one. You can use one of my favourites, but you need to make sure it works in all the cases:

1. Give position: relative; to the parent.
2. Give position: absolute; to the element that needs full height and width.
3. Give the element, 0 values for all the sides.

Snippet

.parent {
  position: relative;
  width: 100px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: skyblue;
}

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

In the above snippet, it is noted that this can also work, if you give:

.parent {
  position: relative;
  width: 100px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  width: 100%;
  height: 100%;
  background: skyblue;
}

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

One good part about this approach is, you don't need to use the dangerous calc:

.parent {
  position: relative;
  width: 150px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 60px;
  background: skyblue;
}

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

Note: On a related note, you can also have a look at this question and answer: Calc() alternative to fixed side bar with content?

Couldst

comprehensive answer thanks. I was pretty determined to keep the elements relative but this works well. – Bonita

Answer 2

1. Set display: flex to the parent
2. Set align-self: stretch for the child

This will stretch the height of the child div/button to fit the height of its parent without doing any trick.

By using position: absolute instead of flex-box, it won't be very nice eventually when you have more stuff added or re-arrange later on would be the nightmare.

Uptake

In 2023, this is the CORRECT/BEST answer, plus it works with parents with undefined height, which is a HUGE plus. – Carnal