38

Please see my jsfiddle

I want the green middle div to fill the remaining space of the wrapper div no matter how much content it has.

If it matters I'm including bootstrap too.

Pixelomo
  • 6,373
  • 4
  • 47
  • 57
Stanley Machnitzki
  • 597
  • 1
  • 4
  • 11

1 Answers1

76

Give the container:

display:flex;
flex-direction:column;

and for the element:

flex:1;

The demo: https://jsfiddle.net/ugjfwbg4/1/

body {
  background-color: red;
  height: 100%;
}

.wrap {
  height: 100vh;
  width: 100%;
  padding: 20px;
  background-color: yellow;
  display:flex;
  flex-direction:column;
}

.top {
  width: 100%;
  height: 50px;
  background-color: blue;
}

.mid {
  width: 100%;
  background-color: green;
  flex:1;
  display:flex;
  flex-direction:column;
}

.left{
  flex:1;
  width: 50%;
  background-color: red;
}

.bottom {
  width: 100%;
  height: 50px;
  background-color: blue;
}
<div class="wrap">
  <div class="top"></div>

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

  <div class="bottom"></div>
</div>
S.Serpooshan
  • 7,608
  • 4
  • 33
  • 61
Jānis
  • 1,773
  • 1
  • 21
  • 30
  • Thanks John. on this fiddle: [link](https://jsfiddle.net/ugjfwbg4/2/) the red div inside of the green does not stretch to 100% can you explain? – Stanley Machnitzki Feb 11 '16 at 19:34
  • Give according css rules to container and child as before. https://jsfiddle.net/ugjfwbg4/3/ and check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Jānis Feb 12 '16 at 11:18