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?

mmh4all · Answer 1 · 2022-03-21T15:59:40.080

0

You have to subtract the height of your header

UPDATE

For the dynamic height of the header you need some javscript, am sure there is better solutions for that but this works also ;)

let contentEl = document.querySelector('#content'),
    headerProperties = getComputedStyle(document.querySelector('#header')),
    headerHeight = headerProperties['height'];

    contentEl.style.height = `calc(100% - ${headerHeight})`;

#root {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

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

#content {
  width: 100%;
  border-bottom: 1px solid red;
}

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

So no matter what is the height of the header, the content will not overflowing

edited Mar 21 '22 at 15:59

answered Mar 21 '22 at 15:00

mmh4all

1,612
4
6
21

1

But I don't know exact header size. – Virinas-code Mar 21 '22 at 15:19
1

@Virinas-code check out my solution update – mmh4all Mar 21 '22 at 15:53
Great idea, but I don't want JavaScript :D Still a good idea. – Virinas-code Mar 21 '22 at 16:28

James · Answer 2 · 2022-03-21T15:37:21.357

Since you don't know the specific length for header, two solutions:

Use height:max-content for root (this will make content have no more space) and custom the space for content by what you want

This will make whatever height for header not going to overflow the parent element.

#root {
  width: 500px;
  height: min-content;
  border: 1px solid black;
}
#header {
  border-bottom: 1px solid black;
  width: 100%;

}
#content {
  width: 100%;
  min-height: 100px;
  border-bottom: 1px solid red;
}

<div id="root">
 <div id="header">Some content</div>
 <div id="content">Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]

The website serves as a platform for users to ask and answer questions, and, through membership and active participation, to vote questions and answers up or down similar to Reddit and edit questions and answers in a fashion similar to a wiki.[13] Users of Stack Overflow can earn reputation points and "badges"; for example, a person is awarded 10 reputation points for receiving an "up" vote on a question or an answer to a question,[14] and can receive badges for their valued contributions,[15] which represents a gamification of the traditional Q&A website. Users unlock new privileges with an increase in reputation like the ability to vote, comment, and even edit other people's posts.[16]</div>
</div>

I don't know the header height since it's dependent of content, and content is dynamic. — Virinas-code, Mar 21 '22 at 15:31
@Virinas-code, I see, I edit my solution a little bit use min-height which will make the minimum height for content to be 100px and it will autogrow when content height exceeds 100px, but anyways see you accpet an answer and glad you find the solution:) — James, Mar 21 '22 at 15:38

score 0 · Accepted Answer · answered Mar 21 '22 at 15:30

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>

Why is height: 100%; overflowing parent?

3 Answers3