Why is height: 100%; overflowing parent?

Question

I'm having some problem with CSS. Here is my code:

#root {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}
#header {
  border-bottom: 1px solid black;
  width: 100%;
  height: 50px;  /* This is an example, we don't know the exact size */
}
#content {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid red;
}

<div id="root">
 <div id="header">Some content</div>
 <div id="content">Why am I overflowing ?</div>
</div>

⚠️ I don't know exact header size!

As you can see, the content div is overflowing the root div, but i want to fill the empty space.

I read many other questions, but they are all about max-width, and I'm not using this property.

How to fill the empty space with my content div?

Answer 1

I would convert to a simple flexbox layout.

#root {
  width: 500px;
  height: 100px; /* 300px; */
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

#header {
  border-bottom: 1px solid black;
}

#content {
  flex: auto;
  border-bottom: 1px solid red;
}

<div id="root">
  <div id="header">Some content</div>
  <div id="content">Why am I overflowing ?</div>
</div>