Make inner div fill remaining height using flex

Question

I'm trying to have the div with id as listItems fill the remaining height on the page. I'm fairly new to web dev front-end and have tried several different ways but it hasn't seemed to work.

The div with the green border is what I'd like to fill the remaining height, keeping the form above it too. For some reason the whole height of the window has a scroll bar already, I was thinking the black/red border would just go to the bottom of my screen but surpasses it for some reason as well. Any ideas on what to try to fix these issues?

HTML/CSS markup:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .home-content {
                display: flex;
                border: 1px solid black;
                height:100vh;
                flex-flow: column;
            }

            .container {
                flex: 1;
                border: 1px solid red;
            }

            #listItems {
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
        <div class="home-section">
            <div class="home-content">
                <div class="container">
                    <form>
                        <label for="example">Input</label>
                        <input type="text" name="example">
                    </form>
                    <div id="listItems">

                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Just an idea at the moment but try adding `height: 100vh` to the CSS for that Div. — Cutey from Cute Code, Nov 19 '21 at 07:39
Also don't forget to use `* { margin: 0; padding: 0; }` in your CSS. — GucciBananaKing99, Nov 19 '21 at 07:40

score 3 · Accepted Answer · answered Nov 19 '21 at 08:24

I edited @Sfili_81's answer and added these to the *

margin: 0;
padding: 0;

Here's the entire code

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.home-content {
  display: flex;
  border: 1px solid black;
  height: 100vh;
  flex-flow: column;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

#listItems {
  border: 3px solid green;
  flex: 1 1 100%;
}

<div class="home-section">
  <div class="home-content">
    <div class="container">
      <form>
        <label for="example">Input</label>
        <input type="text" name="example">
      </form>
      <div id="listItems">

      </div>
    </div>
  </div>
</div>

Sfili_81 · Answer 2 · 2021-11-19T08:01:03.053

1

If you set the container div as flex item you can achieve by using flex-direction:column.

* {
  box-sizing: border-box;
}

.home-content {
  display: flex;
  border: 1px solid black;
  height: 100vh;
  flex-flow: column;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

#listItems {
  border: 3px solid green;
  flex: 1 1 100%;
}

<div class="home-section">
  <div class="home-content">
    <div class="container">
      <form>
        <label for="example">Input</label>
        <input type="text" name="example">
      </form>
      <div id="listItems">

      </div>
    </div>
  </div>
</div>

edited Nov 19 '21 at 08:01

answered Nov 19 '21 at 07:46

Sfili_81

2,377
8
27
36

It seems that did allow the listItems container to fill the rest, how do we get rid of that weird overflow on the page? I tried the above comments too a moment ago but that overflow still happens with that way too I was assuming it'd fit the height of my screen perfectly but has that little bit of extra height - I did try it with setting the margin/padding to 0 too – Hunter Nov 19 '21 at 07:56
try to use a css-reset with * { box-sizing: border-box;} – Sfili_81 Nov 19 '21 at 08:01
Also look at this [answer](https://stackoverflow.com/questions/44645465/when-using-height-100vh-for-the-container-vertical-scrollbar-appears) – Sfili_81 Nov 19 '21 at 08:08

score 1 · Answer 3 · answered Nov 19 '21 at 07:51

1

On the body you have a default margin, also because of the border the height should be

body{
margin:0;
}

.home-content {
   height:calc(100vh - 2px);
 }

jsfiddle

answered Nov 19 '21 at 07:51

Todor Markov

507
5
12

score 0 · Answer 4 · answered Nov 19 '21 at 08:02

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .home-content {
                display: flex;
                border: 1px solid black;
                height:100vh;
                flex-flow: column;
            }

            .container {
                flex: 1;
                border: 1px solid red;
                display: flex;
                flex-direction: column;
            }

            #listItems {
                border: 1px solid green;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="home-section">
            <div class="home-content">
                <div class="container">
                    <form>
                        <label for="example">Input</label>
                        <input type="text" name="example">
                    </form>
                    <div id="listItems">

                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Welcome to Stack Overflow. Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). — Sfili_81, Nov 19 '21 at 08:03

Make inner div fill remaining height using flex

4 Answers4

Linked