Bootstrap 4 Navbar and content fill height flexbox

Question

I have to create a layout in which a content grid has to be on the full remaining page, but the layout has also a navigation bar.

In order to do this I decided to pl

Answer 1

Instead of using h-100 on the yellow content area, add an extra CSS class to make it flex-grow:1 in height...

.flex-fill {
  flex:1 1 auto;
}

https://www.codeply.com/go/xBAMfbHqbN

    

        Brand
        
            
        
        

            

                

                    Menu Item
                    

                        Sub menu
                    
                
                

                    Test
                
            
        
    
    

        

    

Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

(Updated Bootstrap 4.1 demo)

---

Related question: Bootstrap 4: How to make the row stretch remaining height?