CSS - fill the remaining space

Question

I have 3 divs, One on the left side, one in the middle, and one on the right side. The middle contains some information. The height of it is not fixed. The divs on both sides have the same height as the middle's. I want them to fill the remaining space (the vertical space instead of horizontal space). I've tried several ways --- position, flex, float --- all of them don't work as I thought. the HTML:

<div id="bigbox">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
</div>

the CSS:

    #bigbox {
        display: flex;
    }
    .left {
        width: 10%;
        background-color: red;
        height: 100%;
    }
    .mid {
        width: 80%;
        background-color: green;
        height: 500px;
    }
    .right {
        width: 10%;
        background-color: blue;
        height: 100%;
    }

The effect I want is as the following picture. enter image description here

simply remove height:100% – Temani Afif Jun 07 '22 at 20:40 — Temani Afif, Jun 07 '22 at 20:40

Kameron · Answer 1 · 2022-06-07T20:50:09.130

Add a parent, set display: flex; on this parent.

Setting height: 100%; on .left and .right will calculate a height based on content. So it's best to use no height. If you need one you can use heigh: inherit;.

.wrapper {
  display: flex;
}

.left {
  width: 10%;
  background-color: red;
}

.mid {
  width: 80%;
  background-color: green;
  height: 500px;
}

.right {
  width: 10%;
  background-color: blue
}

<div class="wrapper">
  <div class="left"></div>
  <div class="mid"></div>
  <div class="right"></div>
</div>

score 0 · Answer 2 · answered Jun 07 '22 at 14:02

Very straightforward; all you need to do is wrap it in a flexbox:

.left {
  width: 10%;
  background-color: red;
}

.mid {
  width: 90%;
  background-color: green;
  height: 500px;
}

.right {
  width: 10%;
  background-color: blue;
}

.container {
  display:flex; 
  width: auto
}

<div class="container">
  <div class="left"></div>
  <div class="mid"></div>
  <div class="right"></div>
</div>

score 0 · Answer 3 · answered Jun 07 '22 at 14:04

@CodeFreshman, please remove height: 100%; When you use, flex box, the child has the same height default.

#bigbox {
      display: flex;
  }
  .left {
      width: 10%;
      background-color: red;
      
  }
  .mid {
      width: 80%;
      background-color: green;
      height: 500px;
  }
  .right {
      width: 10%;
      background-color: blue;
      
  }

<div id="bigbox">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
</div>

Hope it is helpful ~

Elias Glyptis · Answer 4 · 2022-06-07T14:34:38.063

I hope this answers your question. But maybe you can restructure it with main element and perhaps use container class in a div, then add a row class.

<!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">
  <title>Document</title>
</head>
  <style>
    body, html { margin: 0 }

    body {
      flex-direction: column;
      display: flex;
      min-height: 100vh;
    }

    #bigbox {
      flex-grow: 1;
      display: flex;
    }
    .left {
        width: 10%;
        background-color: red;
    }
    .mid {
        width: 80%;
        background-color: green;
    }
    .right {
        width: 10%;
        background-color: blue;
    }
    
  </style>
<body>

  <div id='bigbox'>
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
  </div>
  
</body>
</html>

CSS - fill the remaining space

4 Answers4