stretching inner div to full height of screen and content with overflow

Question

I am struggling to accomplish a seemingly easy task.

on a widescreen the website should show 2 columns: side menu and content bar
on a smaller screen the webpage should show a single column and a menu now positioned on the bottom
the content should be rendered in a centered column of a fixed width
the background color of the content column must always be full screen height regardless of the content size in that column

I have issues with the last point.

Here is the example: https://jsfiddle.net/jqdy4w1g/19/

On a wide screen if you scroll down below you will notice that the green column's background is not propagated to the bottom:

On a smaller screen same issue:

code snippet

      html,
      body {
        height: 100%;
        color: white;
        margin: 0px;
        padding: 0px;
      }

      .c1 {
        background-color: rebeccapurple;
      }
      .c2 {
        background-color: rosybrown;
      }
      .c3 {
        background-color: seagreen;
      }

      .box {
        display: flex;
        flex-direction: row;
        height: 100%;
      }

      .sidebar {
        height: 100%;
        min-width: 300px;
        /* float: left; */
        order: 1;

        /* position: sticky;
        left: 0;
        top: 0; */

        overflow-y: auto;
      }

      .content {
        height: 100%;
        flex-grow: 1;
        order: 2;
        overflow-x: auto;
          overflow-y: scrollbar;

        align-content: center;
        justify-content: center;
      }

      @media (max-width: 576px) {
        .box {
          flex-direction: column;
          /* display: block; */
        }

        .content {
          width: 100%;
          height: calc(100% - 80px);
          order: 1;

          overflow-y: auto;
        }

        .sidebar {
          width: 100%;
          order: 2;
          height: 80px;

          position: sticky;
          bottom: 0;

          overflow-y: hidden;
          overflow-x: auto;
        }
      }

      .contentcolumn {
        width: 100%;
        max-width: 300px;
        margin: auto;
        height: 100%;
      }

  <body>
    <div class="box">
      <div class="c2 content">
        <div id="tag" class="c3 contentcolumn">
          Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,  
        </div>
      </div>
      <div class="sidebar c1">
        <ul>
          <li>Sidebar</li>
          <li>Sidebar</li>
          <li>Sidebar</li>
          <li>Sidebar</li>
        </ul>
      </div>
    </div>
  </body>

the css seemingly responsible for problem is:

  .content {
    overflow-y: auto;
  }

The overflow in this case is necessary as I want the content to grow indefinately. Without the overflow the page starts to look like this:

The "kind of working" solution to this problem is - if I remove the height 100% from content column - then the background starts to cover the text contents instead. However it does not fulfill the full screen coverage requirement when there is no content on the page:

for full example check the fiddle.

So basically the question is - how do I stretch the content of the div to the full height when there is overflow present. The content column must always take up the full height of the screen (and the content/text)..

How about removing all of those `height: 100%` for the contents area? — Hiro, Nov 08 '21 at 23:02
no it did not work.. I have posted the answer that worked (2 versions - 1 with contents, 1 without so you could check what kind of result I wanted to achieve) — Alex, Nov 09 '21 at 10:23
@Alex i adapted my answer to the new informations you gave me. — bitski, Nov 09 '21 at 11:44

score 1 · Accepted Answer · edited Dec 14 '21 at 20:06

1

At the moment the height of the container for the 1 million "contents" .contentcolumn is set to exactly match that of the flex item parent <div class="c2 content"> with the help of height: 100%;.

Naturally, the background(-color) of .contentcolumn will just affect the overflowing items up to this height and won't "follow" the vertically overflowing text content.

By setting the height definition of .contentcolumn to min-height, that text container:

will overflow in accordance with his text contents height,
will always have at least the height of his parent flex item

.contentcolumn {
  width: 100%;
  max-width: 300px;
  margin: auto;
  // height: 100%;
  min-height: 100%;   <= swapped height with min-height the height property of that container to make it fully cover its text content vertically
}

edited Dec 14 '21 at 20:06

halfer

19,824
17
99
186

answered Nov 09 '21 at 00:01

bitski

1,168
1
13
20

yes this is one of the things I mentioned on the bottom on the post. with this change in place - when there is no content at all - the green area is not stretched to the bottom of the page.. Here is an example: https://jsfiddle.net/vdxhLosy/ – Alex Nov 09 '21 at 09:22
hey check out my answer ! I think I found the solution – Alex Nov 09 '21 at 10:19
1

@Alex I adapted my answer according to the new infos i got from you – bitski Nov 09 '21 at 11:55
yes indeed! The updated version works as expected. `min-height` does the trick. I will mark your answer as accepted answer since I don't know exactly why my own solution works :) Thank you for the input. – Alex Nov 09 '21 at 16:05
@Alex It does, because iirc `display: table` makes the element stretch with its content even beyond set dimensions – bitski Nov 09 '21 at 16:18

Alex · Answer 2 · 2021-11-09T10:25:14.863

Okay so I don't know if this is the best solution in the world but I managed to find the answer by trying different types of options in Chrome debugger.

What finally worked was table display type for the inner column content.

Here is another answer I made because apparently my question is a duplicate: My body background color disappears when scrolling

Regardless, here is the fiddle: https://jsfiddle.net/su1ykrhc/12/

      html,
      body {
        height: 100%;
        color: white;
        margin: 0px;
        padding: 0px;
      }

      .c2 {
        background-color: rosybrown;
      }
      .c3 {
        background-color: seagreen;
      }

      .box {
        height: 100%;
      }

      .content {
        height: 100%;
        overflow-y: auto;

        align-content: center;
        justify-content: center;
      }

      .contentcolumn {
        width: 100%;
        max-width: 300px;
        margin: auto;
        height: 100%;
        
        display: table;
      }

  <body>
    <div class="box">
      <div class="c2 content">
        <div id="tag" class="c3 contentcolumn">
          Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,  Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,  
        </div>
      </div>
    </div>
  </body>

and here is the second scenario when no content is present: https://jsfiddle.net/d0upjeqm/

in both cases the column is stretched 100% regardless of the contents size.. I would still be interested in more solutions to the problem, and some explanation of why my solution actually worked :)

seeing that the other topic is 8 years old I would like to keep this thread active with some up to date 2021+ findings.

Boy, elders of the internet told me you shouldn't really use tables when it's not really tables. — Hiro, Nov 10 '21 at 10:10

stretching inner div to full height of screen and content with overflow

2 Answers2