Why inline-block does not expand to parents computed height?

Question

In the following code, child's (inline-block) width expands to 100% of it's parent's computed width but I do not know as to why the height of the .child does not expand to the .parent's computed height.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ancestor {
  height: 250px;
  border: 1px solid green;
}

.parent {
  display: block;
  padding: 20px;
  border: 1px solid #474747;
  background-color: #fff;
}

.child {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: pink;
}

<div class="ancestor">
  <div class="parent">
    <p class="child">
      Lorem ipsum dolor sit amet, consectetur adipisicing.
    </p>
  </div>
</div>

I am more interested in knowing the logic behind this behaviour rather than a solution. Can someone, pls explain this happens.

Thanks

Because a percentage height on an in-flow element is based on the height of the parent. And since you don't have a height defined on the parent, it computes to `auto`. See my answer in the duplicate for a complete explanation: [**Working with the CSS `height` property and percentage values**](https://stackoverflow.com/a/31728799/3597276). — Michael Benjamin, Sep 12 '17 at 17:44

score 1 · Answer 1 · answered Sep 12 '17 at 17:43

height: 100%; can only be effective when the parent element has a defined height setting. If that height setting also is a percentage value, then the grandparent also needs a defined height, and the same applies for all ancestors up to body and html, unless one of them has a height setting with absolute values (px, em or similar) or vh, which is relative to the viewport.

Why inline-block does not expand to parents computed height?

1 Answers1