Content is overflowing from the main container

Question

I'm running into a CSS issue in the latest version of both Chrome and Firefox that I can't seem to isolate, any help appreciated.

I have a container div that has a 50px top margin. Within the container there's a sidemenu div that's set to 100%. The window has a height of 650px, but when the content is larger than 650px the sidemenu and container divs both is not getting fit into this

Oddly enough it works when you run the snippet, but not when you save the html in the snippet and run it locally. I'm guessing there's some css in StackOverflow that's solving my problem, but I'm not sure what the problem is or how to solve it.

edit: I've discovered that the body height is the size of the window, which is limiting the container div. Still not sure how to ensure the body height grows to the full size of the content.

html, body {
  margin: 0;
}

#container {
  margin-top: 50px;
  height: 100%;
  background-color: lightgreen;
}

#sidenav {
  width: 250px;
  height: 100%;
  display: grid;
  background-color: green;
  align-content: space-between;
}

#menu {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: red;
}

#footer {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

<html>
<body>
<div id="container">
  <div id="sidenav">
    <div id="menu">
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
    </div>
    <div id="footer">
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
    </div>
  </div>
</div>
</body>
</html>

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

Just you need to add min-height:100% instead of height:100% in #container and #sidenav selector.

Please try below css.

Hope this may help you.

html, body {
  margin: 0;
}

#container {
  margin-top: 50px;
  min-height: 100%; /*change*/
  background-color: lightgreen;
}

#sidenav {
  width: 250px;
  min-height: 100%; /*change*/
  display: grid;
  background-color: green;
  align-content: space-between;
}

#menu {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: red;
}

#footer {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

<html>
<head>
</head>
<body>
<div id="container">
  <div id="sidenav">
    <div id="menu">
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
    </div>
    <div id="footer">
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
    </div>
  </div>
</div>
</body>
</html>

Update:

Using min-height:100% would give minimum height of it's container even if there is less content and will not exceed.

But if the height exceeds than the container due to more content, that will allow it to exceed without any issue, as we have just restricted it with minimum not maximum.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 29 '19 at 05:20

Prakash Rajotiya

1,013
5
11

Holy! This definitely solved it, but seems kind of weird that you need to use `min-height` and that `height` doesn't work. Can you explain this? – Rawr Aug 29 '19 at 05:24
1

You are hoping for the height of sidenav to determine the height of its container. Setting it to 100% means that the container determines the sidenav's height. If you remove height and min-height it should work just fine. – JasonB Aug 29 '19 at 05:26
Alright this makes sense, do you know why `min-height: 100%` works? – Rawr Aug 29 '19 at 05:29
Found my answer here: https://stackoverflow.com/questions/2341821/height100-vs-min-height100 Thanks all! – Rawr Aug 29 '19 at 05:31
Welcome @Rawr. Happy to help you. – Prakash Rajotiya Aug 29 '19 at 05:38
Just as a follow up, removing `height` and `min-height` didn't scale the **container** div to the full height of the window if the window height > **container** height. Setting the **container** and **sidenav** `min-height: 100%` solves my original question and ensures that the **container** grows with the window height. – Rawr Aug 29 '19 at 05:43
Yes, I totally agree. I suggested to remove only "height" and replace that with the "min-height" with "100%" as it's value. Also, updating my answer for the reason behind using `min-height` and not using `height`. – Prakash Rajotiya Aug 29 '19 at 06:04
Yep. There were a couple other answers suggesting `height` over `min-height` so I wanted to give context around why I selected your answer; because it properly solves several conditions around the content length. – Rawr Sep 03 '19 at 21:54

Pushprajsinh Chudasama · Answer 2 · 2020-04-22T11:45:47.407

The code below will solve your problem .

<html>
<head>
<style>
html, body {
 margin: 0;
}
#container {
 margin-top: 50px;
 background-color: lightgreen;
}
#sidenav {
 width: 250px;
 display: grid;
 background-color: green;
 align-content: space-between;
}
#menu {
 grid-column: 1 / 2;
 grid-row: 1 / 2;
 background-color: red;
}
#footer {
 grid-column: 1 / 2;
 grid-row: 2 / 3;
}
</style>
</head>
<body>
<div id="container">
 <div id="sidenav">
   <div id="menu">
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/>
   </div>
   <div id="footer">
     footer<br/>
     footer<br/>
     footer<br/>
     footer<br/>
     footer<br/>
     footer<br/>
   </div>
 </div>
</div>
</body>
</html>

Upvoted, but I selected the other answer because setting `min-height: 100%` also solved the problem of scaling the **container** div if the window height > **container** height. — Rawr, Aug 29 '19 at 05:33

score 0 · Answer 3 · answered Aug 29 '19 at 05:58

The simple solution to achieve this is using height:inherit , this will inherit the 100% height of the body tag. 
So, the code change will be :
#container {
    margin-top: 50px;
    height: inherit;  /*change*/
    background-color: lightgreen;
}

#sidenav {
    width: 250px;
    height: inherit;  /*change*/
    display: grid;
    background-color: green;
    align-content: space-between;
    position: relative;
}

or,

First set body height to 100% and then inherit from there.
html, body {
  height: 100%;
  margin: 0;
}

#container {
    margin-top: 50px;
    height: inherit;  /*change*/
    background-color: lightgreen;
}

#sidenav {
    width: 250px;
    height: inherit;  /*change*/
    display: grid;
    background-color: green;
    align-content: space-between;
    position: relative;
}

score 0 · Answer 4 · answered Aug 29 '19 at 06:43

Even though there are few answer to the question, I was also bothering why height 100% didn't worked I took you code and after executing your code if we remove height 100% or if we keep min-height we get expected result but question didn't end here for me as i was bothering why height 100% was not working

To analyse more i gave border to all sections including HTML and body and the border cleared my doubt

Now if you see the image we have blue border which i provided to html and body and content is even coming out of html and body

Then i tried to find out why height 100% didn't worked

If we give height 100% it will take 100% height of its parent which is body

Note: html {height:100%} relates to parent's height not to the height of the inner content

Than i tried to find out what is height of html and body and important finding is

**

Your html actually exactly extends to 100% height of your viewport and viewport here is the browser window, not the inner content

**.

Also see below questionheight and width on html and body elements

Now we understand why height 100% didn't worked and if we remove height it will extend to its full content, if we give min-height it take height equal or more than mentioned height If we mention height it will take exact height and extra content will move out of mentioned height

Content is overflowing from the main container

4 Answers4

Update:

Linked