Stretch last div element to fill the remaing space css flex

Question

        .main {
    background-color: greenyellow;
    height: 100vh;
    /* flex-direction: column; */
}

.header{
    background-color: hotpink;
}
.filter{
    background-color: indianred;
}
.sort{
    background-color: lavender;
}

.jobs{
    background-color: lightsteelblue;
    display: flex;
    flex-grow: 1;
   
}

.joblist{
    background-color: cornflowerblue;
}



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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="style.css"> -->
  
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="header">
            <span>Header</span>
        </div>
        <div class="filter">
            <h1>Filter</h1>
        </div>
        <div class="sort">
            <h1>Sort</h1>
        </div>
        <div class="jobs">
            <div class="joblist">
                <div class="items">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                    <div class="item">6</div>

                </div>
                <div class="pagination">
                    <h1>Pagination</h1>
                </div>

            </div>
            <div class="jobview">
                content
            </div>

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

I have put height: 100vh to paint the full viewport with green color. header, filter, sort should take the relevant space they needed. The rest of the space should occupy by the jobs section. ideally, the jobs section should scroll all the way to the bottom. I tried flex-grow: 1 and in some places, it says flex-grow works only for the main-axis so I tried to flex-direction: column` to make the main-axis. But still no results.

How could I achieve this with css?

score 1 · Accepted Answer · answered Jan 11 '22 at 07:49

You only need to add display: flex; and uncomment the flex-direction: column; to get the effect you need. The flex-grow: 1; or flex: 1; for short did not take effect because the parent itself wasn't a flexbox.

.main {
  background-color: greenyellow;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.header {
  background-color: hotpink;
}

.filter {
  background-color: indianred;
}

.sort {
  background-color: lavender;
}

.jobs {
  background-color: lightsteelblue;
  display: flex;
  flex: 1;
}

.joblist {
  background-color: cornflowerblue;
}

.footer {
  height: 1px;
  background: black;
}

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="style.css"> -->

  <title>Document</title>
</head>

<body>
  <div class="main">
    <div class="header">
      <span>Header</span>
    </div>
    <div class="filter">
      <h1>Filter</h1>
    </div>
    <div class="sort">
      <h1>Sort</h1>
    </div>
    <div class="jobs">
      <div class="joblist">
        <div class="items">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
        <div class="pagination">
          <h1>Pagination</h1>
        </div>
      </div>
      <div class="jobview">
        content
      </div>
    </div>
  </div>
</body>

</html>

score 0 · Answer 2 · answered Jan 11 '22 at 07:12

.main {
    background-color: greenyellow;
    height: 100vh;
    /* flex-direction: column; */
}

.header{
    background-color: hotpink;
}
.filter{
    background-color: indianred;
}
.sort{
    background-color: lavender;
}

.jobs{
    background-color: lightsteelblue;
    display: flex;
    flex-grow: 1;
    height:100%;
   
}

.joblist{
    background-color: cornflowerblue;
}



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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="style.css"> -->
  
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="header">
            <span>Header</span>
        </div>
        <div class="filter">
            <h1>Filter</h1>
        </div>
        <div class="sort">
            <h1>Sort</h1>
        </div>
        <div class="jobs">
            <div class="joblist">
                <div class="items">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                    <div class="item">6</div>

                </div>
                <div class="pagination">
                    <h1>Pagination</h1>
                </div>

            </div>
            <div class="jobview">
                content
            </div>

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

Adding height:100% to jobs class has one issue. Then jobs class itself take 100vh height. So need to scroll to see the full page — margherita pizza, Jan 11 '22 at 07:19

score 0 · Answer 3 · answered Jan 11 '22 at 07:22

0

I suggest giving each of the divs a height so that each has its own space like so. You can use vh instead of % also

.header{
    background-color: hotpink;
    height: 10%;
}
.filter{
    background-color: indianred;
    height: 15%;
}
.sort{
    background-color: lavender;
    height: 15%;
}

.jobs{
    background-color: lightsteelblue;
    display: flex;
    flex-grow: 1;
    height: 60%;

answered Jan 11 '22 at 07:22

Shiju Nambiar

161
9

header, filter, sort are dynamically rendering. Sometimes there may not a filter section at all. Better if I assign all remaining space to jobs class – margherita pizza Jan 11 '22 at 07:26
In such case go for height: 100% for jobs, but for a more organized structure you can also use calc() function. Something like height: calc(100vh - sum of rest of the divs) – Shiju Nambiar Jan 12 '22 at 07:30

Stretch last div element to fill the remaing space css flex

3 Answers3

Linked