Stretch last div element to fill the remaing space css flex

user_7346647 0
Viewed 233

        .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>

enter image description here

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?

flexbox css html
3 Answers

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>

user_153726680 

.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>

user_160957240

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%;
user_65433820
Related