Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow

Question

Currently, I am have a (class=\"d-flex flex-column\") containing a navbar and a container and this container contains a (class=\"d-flex flex-column\") as well that contains

Answer 1

I think you just need to remember that flex-grow applies to the child of display:flex, and not the parent. Therefore, if the parent is also a child flex-grow will work.

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

In your case,

should also be d-flex so that you can use flex-grow to have it's children grow in height, and then continue this down to the drawing area.

https://codeply.com/go/gT3jsg43Lv

    

        Back
        Logout
    
    

        

            

                


                    

                        

                            

                                
                                    Main
                                    Unknown
                                
                                Create
                                Delete
                                Edit
                            
                            

                                Previous
                                Next
                            
                        

                        
 draw area 

                    
                
            
            

        
    

---

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

Here's another example with scrollable right column, and top navbar: https://codeply.com/p/93751rK5WQ

---

Related
Bootstrap 4.0 - responsive header with image + navbar + full-height body
How to make the row stretch remaining height