Child div shrinking even when set to 100% of parent

Question

edit: Discovered that my the issue was related to the height property of some of the elements. The question was remade into body doesn't grow to size of content if the content height is greater than the window height. This question can be closed because the issue is a little broad and doesn't accurately narrow down the question to the real problem.

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.

The topnav area has a height of 50px.
The sidenav has a height of 500px.
The footer, with a transparent background, has a height of 72px.
The total height is 622px.

If the page is >622px then the sidenav, green area, properly extends the full length of the content parent, yellow area.

Example of >622px tall

If the size of the page falls below 622px, then the sidenav shrinks exposing the content behind it. I'm not sure why the sidenav is shrinking because it should extend 100% of the height of the content, the parent.

Example of <622px tall

#nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  background-color: blue;
  color: #fff;
}

#content {
  position: fixed;
  top: 50px;
  left: 0;
  display: flex;
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: auto;
  background-color: yellow;
}

#sidenav {
  width: 250px;
  height: 100%;
  background-color: green;
}

#menu {
  min-height: 500px;
  background-color: red;
}

<html>

<head>
</head>

<body>
  <div id="nav">topnav</div>
  <div id="content">
    <div id="sidenav">
      <div id="menu">sidenav</div>
      <div>footer1<br/>footer2<br/>footer3<br/>footer4<br/></div>
    </div>
    content
  </div>
</body>

</html>

you are simply having an overflow since you set the green area to be height:100% of the parent which also set to `height:calc(100% - 50px)` — Temani Afif, Aug 28 '19 at 09:01

Julio Feferman · Accepted Answer · 2019-08-28T09:29:57.407

If your intent is to have fixed header, fixed sidebar with variable height for menu and footer, and an overflowing content area, all boxed into the viewport, please consider the following snippet based on flex layout.

Do note that the sidebar menu is currently set to expand via the shorthand flex: 1 1 auto value (flex-grow | flex-shrink | flex-basis). This can be adjusted as needed.

html,
body {
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

#nav {
  flex: 0 0 50px;
  background-color: blue;
  color: #fff;
}

#content {
  flex: 1 1 auto;
  display: flex;
}

#sidenav {
  flex: 0 0 250px;
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
}

#contentMain {
  flex: 1 1 auto;
  height: calc(100vh - 50px);
  background-color: yellow;
  overflow: auto;
}

#menu {
  flex: 1 1 auto;
  background-color: red;
  overflow: auto;
}

#footer {
  flex: 0 0 auto;
  background-color: green;
}

<div id="container">
  <div id="nav">topnav</div>
  <div id="content">
    <div id="sidenav">
      <div id="menu">
        sidenav<br /><br /><br />
        sidenav<br /><br /><br />
        sidenav<br /><br /><br />
        sidenav<br /><br /><br />
        sidenav<br /><br /><br />
        sidenav<br /><br /><br />
        sidenav<br /><br /><br />
        sidenav<br /><br /><br />
      </div>
      <div id="footer">footer1<br />footer2<br />footer3<br />footer4<br /></div>
    </div>
    <div id="contentMain">
      content<br /><br /><br /><br /><br /><br /><br />
      content<br /><br /><br /><br /><br /><br /><br />
      content<br /><br /><br /><br /><br /><br /><br />
      content<br /><br /><br /><br /><br /><br /><br />
      content<br /><br /><br /><br /><br /><br /><br />
      content<br /><br /><br /><br /><br /><br /><br />
    </div>
  </div>
</div>

This solution runs into a bunch of problems if the size of the menu ever gets larger than the size of the window. See picture. https://i.gyazo.com/9765fceedecd761fcd65d8904ca13ed1.png — Rawr, Aug 28 '19 at 09:25
I'm looking to make the sidenav or contentMain to determine the max height of the content div and the footer to be at the bottom of sidenav. Making the sidenav variable height with an overflow is kind of a bandaid fix for the problem I'm trying to solve here. — Rawr, Aug 28 '19 at 09:34
I see. Then you are right, the snippet has a different intent. You might be able to achieve the result using your original absolute layout and a flex based layout for the sidenav and content. — Julio Feferman, Aug 28 '19 at 09:40
I'll give that a try and get back to you in a bit, it's getting a little late here. Thanks for the suggestion. — Rawr, Aug 28 '19 at 09:44

Eden Hernandez · Answer 2 · 2019-08-28T09:50:39.453

1

As Temani Afif said in the comment, #sidenav is set to 100% height of its parent #content, but #content has a height of 100% - 50px. Since #menu has a min height of 500px and the footer has a height of around 72px, you can imagine that for window heights below 622px there won't be enough space to fit the footer1, footer2,... elements inside the last div.

A possible solution:

#sidenav {
    display: flex;
    flex-direction: column;
}

#menu {
    /* min-height: 500px; */
    flex-grow: 1;
}

Removing the min height of the menu will remove the overflow. Now you only need to make it use the whole available space (with flew-grow: 1) and, of course, set the parent sidenav as a flex container with column direction.

<html>
<head>
<style>

body {
margin: 0;
}

#nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  background-color: blue;
  color: #fff;
}

#content {
  display: flex;
  width: 100%;
  height: calc(100vh - 50px);
  margin-top: 50px;
  overflow-y: auto;
  background-color: yellow;
}

#sidenav {
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 100%;
  background-color: green;
}

#menu {
  flex-grow: 1;
  overflow-y: scroll;
  background-color: red;
}
</style>
</head>
<body>
<div id="nav">topnav</div>
<div id="content">
  <div id="sidenav">
    <div id="menu">sidenav</div>
    <div>footer1<br/>footer2<br/>footer3<br/>footer4<br/></div>
  </div>
  content
</div>
</body>
</html>

Hope it works for you ;)

edited Aug 28 '19 at 09:50

answered Aug 28 '19 at 09:23

Eden Hernandez

73
6

The reason the min-height is 500px is to assume the menu is long. Is there not a way to indicate the height of content should be 100% the height of it's parent - 50px. And the height of sidenav to be 100% the size of the content? I thought that's what I'm doing here. If the menu grows and increases the height of the content, then I'd want the sidenav to grow with that height. Is calc done on load? – Rawr Aug 28 '19 at 09:29
@Rawr it's fine to set the height as 100% - 50px (although I'd rather use `calc(100vh - 50px)` with a top margin of 50px and forget about `position: fixed`). The problem is the combination of that fixed height with the min-height of the menu. Together, they are setting a constraint, so 50px + 500px + 72px (the footer height) is the limit for your window height to show everything in place. If you set a flex-grow of 1, the menu will be as height as possible. I'm also updating the snippet so the menu allows more content (and removing the fixed position). – Eden Hernandez Aug 28 '19 at 09:47
Ah this is very very helpful. Addressing my original mistake and helping me understand what's happening to cause the issue. I appreciate it. The end goal here is to wrap both the menu and content and let the height of both grow to the max of both with the footer always at the bottom of the menu. If the size of the window is shorter than the menu + footer then i'd like the wrapped area (menu + content) to overflow. Maybe my mistake is trying to put the footer outside the menu instead of inside it. – Rawr Aug 28 '19 at 09:52
If you want the menu + footer to overflow on smaller windows, then my last edit won't work for you. I thought you wanted the footer always visible, my mistake. However, I encourage you to try to solve this layout using CSS Grid, that would probably make your life way easier :) – Eden Hernandez Aug 28 '19 at 09:55
Can you provide a link to some resources for that? There's a lot of css resources and it's easy to get mixed up. Sometimes I'll see suggestions and I'm not sure if it's a css framework or a css property, etc. – Rawr Aug 28 '19 at 09:58
Oh I think I found what I needed. https://css-tricks.com/snippets/css/complete-guide-grid/ Specifically **grid-template-columns** and **grid-template-rows** – Rawr Aug 28 '19 at 10:00
The basic resources are, for the **theory**: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout _ **practical**: https://css-tricks.com/snippets/css/complete-guide-grid/ (what you already found). With that , some time and some practice, you'll have enough knowledge to solve any layout in the future ;) – Eden Hernandez Aug 28 '19 at 11:58
oddly enough this issue is still happening. Posted a new question that isolates this issue. https://stackoverflow.com/questions/57703262/div-doesnt-grow-to-size-of-content-if-the-content-height-is-greater-than-the-wi – Rawr Aug 29 '19 at 05:03
Found my solution in the next question. Added an edit to this page to provide more context. – Rawr Aug 29 '19 at 05:40

score 0 · Answer 3 · answered Aug 29 '19 at 06:55

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

Also please find my answer to this question Content is overflowing from the main container

Also importan reading https://makandracards.com/makandra/39473-stretching-an-html-page-to-full-height

Child div shrinking even when set to 100% of parent

3 Answers3