Div fill automatically remaining height

by Victor

HTML

<div id="container" class="panel">
    <div id="cell1">
        <input type="checkbox" onclick="toggle(this)"> fill
        <br>bla
        <br>bla
        <br>bla
    </div>
    <div id="cell2">
        <input type="checkbox" onclick="toggle(this)"> fill
        <br>bla
        <br>bla
        <br>bla
    </div>
    <div id="cell3" class="fill">
        <input type="checkbox" onclick="toggle(this)" checked> fill
        <br>bla
        <br>bla
        <br>bla
    </div>
</div>

CSS

#container{
    width: 400px;
    height: 400px; 
}

.panel {
    display: table;
}
.panel > div{
    display: table-row;
    height: 0;
}
.panel > div.fill{
    height: auto;
}




/* Unimportant styles just to make the demo looks better */
#container {
    border: 3px solid magenta;
}
#cell1 {
    background: lightblue;
}
#cell2 {
    background: lightyellow;
}
#cell3{
    background: lightgreen;
}
body {
    margin: 20px;
    font-family: sans-serif;
}

JavaScript

function toggle(elm){
    //Toggle the class .fill
    elm.parentElement.classList.toggle('fill');
}