'How to expand a flexbox container to the end of the page? [duplicate]

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

htmlcssflexboxnode.jswebpackelectron


Solution 1:[1]

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%;
}

Solution 2:[2]

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>

Solution 3:[3]

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>

Solution 4:[4]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 HASEEB ALAM RAFIQ
Solution 2
Solution 3 AStombaugh
Solution 4 tacoshy

Related Questions