CSS Div riempimento rimanente altezza

Question

Si prega di vedere il mio jsfiddle

voglio il verde centrale div per riempire lo spazio rimanente dell'involucro div non importa quanto il contenuto che ha.

Se è importante, includo anche il bootstrap.

Answer 1

Dare il contenitore:

display:flex; 
flex-direction:column; 

e per l'elemento:

flex:1; 

---

La 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>