CODEWITHSUNDEEP
htmlcsssass
Stormnorm
Stormnorm

Reputation: 181

Flexbox grow div to take up remaining height

versions of this have been asked before and these questions helped me so far as to have a flex item that grows in height. However, it grows too much :)

Please see the code pen or the code here https://codepen.io/surf-n-code/pen/wvwrbKW

Basically I have this Code

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.box {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-1 {
  background-color: green;
  height: 60px;
}

.box-2 {
  background-color: blue;
  flex: 1;
}

.box-3 {
  background-color: red;
  height: 60px;
}
<body>
  <header>
    <div class="box box-0">Header - sticks to top</div>
  </header>

  <main class="full-height">
    <div class="nd_container">
      <div class="box box-1">content</div>
      <div class="box box-2">Flex grow</div>
    </div>
  </main>

  <footer>
    <div class="box box-4">Footer - stick to bottom</div>
  </footer>
</body>

I would expect the box-2 to increase in size just enough such that the footer sticks exactly to the bottom of the page. I do not want any scrolling due to the created whitespace.

Any help is much appreciated :)

Upvotes: 0

Views: 68

Answers (1)

Amaresh S M
Amaresh S M

Reputation: 3010

I hope this is what you expecting check out my answer.

NOTE:CHECK OUT MY ANSWER IN FULL SCREEN MODE

box-2 to increase in size just enough such that the footer sticks exactly to the bottom of the page. 

html,
body {
  height: 100%;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-flow: column;
}
.nd_container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-flow: column;
}

.nd_container .box {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  padding: 20px;
  justify-content: center;
}

.nd_container .box-1 {
  background-color: green;
  flex: 0 1 60px;
}

.nd_container .box-2 {
  background-color: red;
  flex: 1 1 auto;
}

.box {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box.box-0 {
  background-color: #03a9f4;
  height: 100%;
}

.box.box-4 {
  background-color: #0c5460;
  height: 100%;
}

header {
  flex: 0 1 155px;
}

main {
  flex: 1 1 auto;
}

footer {
  flex: 0 1 155px;
}
<body>
  <header>
    <div class="box box-0">Header - sticks to top</div>
  </header>
  <main class="full-height">
    <div class="nd_container">
      <div class="box box-1">content</div>
      <div class="box box-2">Flex grow</div>
    </div>
  </main>
  <footer>
    <div class="box box-4">Footer - stick to bottom</div>
  </footer>
</body>

Upvotes: 1

Related Questions