How to expand a flexbox container to the end of the page?

Question

I'm trying to expand the content in the middle (main-box) to fit the whole page until it reaches the footer. I've tried adding flex: 1 to it, making the height: 100% or even use flex-grow: 1 as it is a child of a flex item.

body {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: solid black 10px;
}

.page {
  display: flex;
  flex-direction: column;
  flex: 1;
}

header {
  background-color: #2D3047;
  color: #E0CA3C;
}

.container {
  flex-grow: 1;
}

.buttons {
  text-align: center;
}

.points {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.computer,
.player {
  border: solid black 2px;
  padding: 10px;
  margin: 20px;
}

.result {
  text-align: center;
  border: solid black 2px;
  margin: 0;
  padding: 0;
  width: auto;
}

footer {
  background-color: #2D3047;
  color: #E0CA3C;
  justify-self: flex-end;
}

<div class="page">
  <header>
    <h1>Rock, Paper, Scissors</h1>
  </header>
  <div class="main-box">
    <div class="buttons">
      <button class="rock">Rock</button>
      <button class="paper">Paper</button>
      <button class="scissors">Scissors</button>
    </div>
    <div class="container">
      <div class="points">
        <div class="player-score">0</div>
        <div class="computer-score">0</div>
      </div>
      <div class="result"></div>
    </div>
  </div>
  <div class="footer">Copyright CAIFRA</div>
</div>

Codepen

Crystal · Answer 1 · 2022-05-19T00:23:10.677

Maybe you can add 100vh on your container and see if this is what you want. Let me know

html {height: 99.1%;}

body {

  flex-direction: column;
  border: 10px solid black ;
  height:99.1%;
  margin: 0;
  padding: 0;  
}

.page {
  display: flex;
  flex-direction: column;
}

header {
  background-color: #2D3047;
  color: #E0CA3C;
}

.container {
  height: 99.1% ;
  bottom: 10px;
  overflow: hidden;
}

.buttons {
  text-align: center;
}

.points {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.computer,
.player {
  border: solid black 2px;
  padding: 10px;
  margin: 20px;
}

.result {
  text-align: center;
  border: solid black 2px;
  margin: 0;
  padding: 0;
  width: auto;
}

.footer {
  background-color: #2D3047;
  color: #E0CA3C;
  bottom: 10px;
  position: fixed;
  width: 100%;
  
}

<body>
<div class="page">
  <header>
    <h1>Rock, Paper, Scissors</h1>
  </header>
  <div class="main-box">
    <div class="buttons">
      <button class="rock">Rock</button>
      <button class="paper">Paper</button>
      <button class="scissors">Scissors</button>
    </div>
    <div class="container">
      <div class="points">
        <div class="player-score">0</div>
        <div class="computer-score">0</div>
      </div>
      <div class="result"></div>
    </div>
  </div>
  <div class="footer">Copyright CAIFRA</div>
</div>


 
</body>

This actually makes the height bigger than the screen itself. The footer now is at the bottom as supposed but the page is now scrollable and shows the footer only when scrolled all the way at the bottom. — CaiaFra, May 18 '22 at 21:56
@CaiaFra so you just want it to be at the bottom depends on what screen size it is?? no scroll? — Crystal, May 18 '22 at 22:03
Yes, I would like it to be at the bottom of the current screen size without having to scroll the page. The page itself it's quite small, I don't see the need for scrolling it. — CaiaFra, May 18 '22 at 22:07

score 0 · Answer 2 · edited May 19 '22 at 17:07

body {
  margin: 0;
  padding: 0;
}

header {
  text-align: center;
  background-color: #2D3047;
  color: #E0CA3C;
  padding: 20px;
}

.page {
  display: flex;
  flex-direction: column;
  height: 90vh;
}

.main-box {
  background-color: #93B7BE;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  height: 100vh;
}

.computer-score,
.player-score {
  border: 2px black solid;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

.points {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.result {
  border: 2px black solid;
  height: 50px;
  width: 300px;
  margin-left: auto;
  margin-bottom: 20px;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 30px;
}

.footer {
  text-align: center;
  background-color: #2D3047;
  color: #E0CA3C;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

<div class="page">
  <header>
    <h1>Rock, Paper, Scissors</h1>
  </header>

  <div class="main-box">
    <div class="buttons">
      <button class="rock">Rock</button>
      <button class="paper">Paper</button>
      <button class="scissors">Scissors</button>
    </div>

    <div class="container">
      <div class="points">
        <div class="player-score">0</div>
        <div class="computer-score">0</div>
      </div>

      <div class="result"></div>
    </div>
    <div class="footer">
      Copyright CAIFRA
    </div>
  </div>
</div>

There is an extra white row that I can't account for under the main-box and before the footer — CaiaFra, May 18 '22 at 22:13
You can add 100vh height in thee main-box for it to be expanded till the footer. — Nazish, May 18 '22 at 22:21

score 0 · Answer 3 · answered May 18 '22 at 21:21

I see you are using position absolute on footer class , in my opinion take a look i change it into a position relative. using position relative with bottom 0 , then it will work,

    <div class="page">
      <header>
        <h1>Rock, Paper, Scissors</h1>
      </header>
    
      <div class="main-box">
        <div class="buttons">
          <button class="rock">Rock</button>
          <button class="paper">Paper</button>
          <button class="scissors">Scissors</button>
        </div>
    
        <div class="container">
          <div class="points">
            <div class="player-score">0</div>
            <div class="computer-score">0</div>
          </div>
    
          <div class="result"></div>
        </div>
      </div>
      <div class="footer">
        Copyright CAIFRA
      </div>
    </div>

CSS CODE

body {
  margin: 0;
  padding: 0;
}

header {
  text-align: center;
  background-color: #2D3047;
  color: #E0CA3C;
  padding: 20px;
}

.page {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.main-box {
  background-color: #93B7BE;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.computer-score, .player-score {
  border: 2px black solid;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

.points {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.result {
  border: 2px black solid;
  height: 50px;
  width: 300px;
  margin-left: auto;
  margin-bottom: 20px;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}


.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 30px;
}
  
.footer {
  text-align: center;
  background-color: #2D3047;
  color: #E0CA3C;
  padding: 10px;
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
}

This actually doesn't show the footer at the bottom of the page but only at the bottom of the .main-box — CaiaFra, May 18 '22 at 22:00

score -1 · Answer 4 · answered May 18 '22 at 21:04

Simply add body { min-height: 100vh; }, so it actually ahs the size of at least the viewport size. By default it will only have the height of the content.

body {
  margin: 0;
  box-sizing: border-box;
  min-height: 100vh;
}

/* original CSS */
body {
  display: flex;
  flex-direction: column;
  border: solid black 10px;
}

.page {
  display: flex;
  flex-direction: column;
}

header {
  background-color: #2D3047;
  color: #E0CA3C;
}

.container {
  flex-grow: 1;
}

.buttons {
  text-align: center;
}

.points {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.computer,
.player {
  border: solid black 2px;
  padding: 10px;
  margin: 20px;
}

.result {
  text-align: center;
  border: solid black 2px;
  margin: 0;
  padding: 0;
  width: auto;
}

footer {
  background-color: #2D3047;
  color: #E0CA3C;
}

<div class="page">
  <header>
    <h1>Rock, Paper, Scissors</h1>
  </header>
  <div class="main-box">
    <div class="buttons">
      <button class="rock">Rock</button>
      <button class="paper">Paper</button>
      <button class="scissors">Scissors</button>
    </div>
    <div class="container">
      <div class="points">
        <div class="player-score">0</div>
        <div class="computer-score">0</div>
      </div>
      <div class="result"></div>
    </div>
  </div>
  <div class="footer">Copyright CAIFRA</div>
</div>

Although this may be answering the OP's question, I don't see the footer being positioned at the "end for the page" like mentioned in the title of this question. — M0nst3R, May 18 '22 at 21:06

How to expand a flexbox container to the end of the page?

4 Answers4