CSS - fill the remaining space-CodePudding

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 ></div>
    <div ></div>
    <div ></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

CodePudding user response：

Add a parent, set display: flex; on this parent. Then use height: inherit; on your .left and .right divs. height: 100%; could be problematic cause it will go 100% of content.

.wrapper {
  display: flex;
}

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

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

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

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

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 >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

@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 ></div>
    <div ></div>
    <div ></div>
</div>

Hope it is helpful ~

CodePudding user response：

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 ></div>
    <div ></div>
    <div ></div>
  </div>
  
</body>
</html>