I want height of children div .cell to take up 100% height of parent. But it is not happening.

HTML:

<div class="header">
    header
</div>
<div class="wrapper">    
    <div class="padding">
        <div class="table bg">
            <div class="cell">
                hello world
            </div>
            <div class="cell">
                dummy text
            </div>
        </div>
    </div>
</div>
<div class="footer">
    footer
</div>

CSS:

html,body{height:100%;}
body{margin:0;padding:0;}
.footer,.header{background:black;height:30px;color:white;}
.wrapper{min-height:calc(100% - 60px);height:auto !important;}
.padding{padding:20px;}
.table{display:table;width:100%;}
.cell{display:table-cell;}
.bg{background:#ccc;}

I think it is not happening because I have

.wrapper{min-height:calc(100% - 60px);height:auto !important;}

It happens if I change .wrapper to

.wrapper{height:calc(100% - 60px);}

then it is happening.

Here is the fiddle.