How to fill 100% of remaining height?

Question

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|            


        

Answer 1

    html,
    body {
        height: 100%;
    }

    .parent {
        display: flex;
        flex-flow:column;
        height: 100%;
        background: white;
    }

    .child-top {
        flex: 0 1 auto;
        background: pink;
    }

    .child-bottom {
        flex: 1 1 auto;
        background: green;
    }

    

        

          This child has just a bit of content
        
        

          And this one fills the rest