Why is child div inheriting parent's height on height 100%?

Question

#info {
  position: fixed;
  left: 30px;
  top: 30px;
  display: flex;
  flex-direction: column;
  color: whitesmoke;
  width: 300px;
  height: 100px;
  box-sizing: border-box;
}

#heading {
  min-height: 3em;
  background-color: rgb(88, 86, 86);
  box-sizing: inherit;
}

#content {
  height: 100%;
  background-color: rgb(32, 32, 32);
  padding: 10px;
  box-sizing: inherit;
}

#content>div {
  max-height: 100%;
  overflow-y: scroll;
}

#content::-webkit-scrollbar,
#content>div::-webkit-scrollbar,
#img>div::-webkit-scrollbar { width: 0; }

<div id="info">
  <div id="heading"></div>
  <div id="content">
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum at veniam temporibus quidem sed excepturi, architecto nihil odio ipsum aspernatur expedita tenetur repellendus quod eaque, dolore harum laboriosam quia voluptatum quisquam sit reprehenderit corporis.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi distinctio, esse voluptatibus consequuntur ut in facere recusandae aliquam modi, deserunt explicabo cumque facilis qui rerum porro sequi alias vitae perspiciatis numquam! Obcaecati rerum adipisci laudantium enim illo vero maxime assumenda praesentium dolore temporibus! Aliquid, nesciunt distinctio odit delectus hic quod perspiciatis, culpa iusto in laudantium libero tenetur quasi quia dignissimos eos corporis facere non asperiores ipsam ut.</p>
    </div>
  </div>
</div>

Why is #content having the same height as the parent?

I used to think height: 100% means that the element is going to stretch to occupy all the available space in its container, but apparently that is not the case here. How do I make #content occupy the available space in #info and not, you know, 'inherit' the height from #info?

NOTE: The dimensions of the elements are not visible in the example, but Dev Tools might help with that.
NOTE also: I don't want to remove or add any divs, as this is a part of a larger project, but if that is the only way, then I'm ready to accept it.

Why is child div inheriting parent's height on height 100%?

0 Answers0