html - How can I allocate all height space not used to my element -

i want table take remaining height on page not being used menubar div , slider container div. use flexbox accomplish this? if how? thanks.

html

<section class="analysis" ng-controller="analysis">     <div class="menubar">         <div class="view-ctrls text-center">             <div class="btn-group" role="group">                 <button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleview(0)">r-theta</button>                 <button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleview(1)">cartesian</button>                 <button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleview(2)">longitudinal</button>                 <button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">console</button </div>             </div>         </div>         </ul>     </div>     <table>         <tr class="r1">             <td id="v1">view 1                 <div class="close-btn" ng-click="changeview(0)">x</div>             </td>             <td id="v2">view 2                 <div class="close-btn" ng-click="changeview(1)">x</div>             </td>         </tr>         <tr class="r2">             <td colspan="2" id="v3">                 <div class="close-btn" ng-click="changeview(2)">x</div>                 <ul>                     <li class="frames-container">                         frames                     </li>                 </ul>             </td>         </tr>     </table>     <div class="slider-container">         <ul>             <li class="frame-num">                 #             </li>             <li class="slider">                 <input type="range">             </li>         </ul>     </div> </section> 

you can try css table layout, in order so, added div around table.

by way, have markup errors, got them fixed below.

html, body, .analysis {    height: 100%;    margin: 0;  }  .analysis {    display: table;  }  .analysis .menubar,  .analysis .table-container,  .analysis .slider-container {    display: table-row;  }  .analysis .table-container,  .analysis .table-container table {    height: 100%;  }  .analysis .table-container table {    border: 1px solid red;  }

<section class="analysis" ng-controller="analysis">    <div class="menubar">      <div class="view-ctrls text-center">        <div class="btn-group" role="group">          <button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleview(0)">r-theta</button>          <button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleview(1)">cartesian</button>          <button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleview(2)">longitudinal</button>          <button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">console</button>        </div>      </div>    </div>    <div class="table-container">      <table>        <tr class="r1">          <td id="v1">view 1            <div class="close-btn" ng-click="changeview(0)">x</div>          </td>          <td id="v2">view 2            <div class="close-btn" ng-click="changeview(1)">x</div>          </td>        </tr>        <tr class="r2">          <td colspan="2" id="v3">            <div class="close-btn" ng-click="changeview(2)">x</div>            <ul>              <li class="frames-container">                frames              </li>            </ul>          </td>        </tr>      </table>    </div>    <div class="slider-container">      <ul>        <li class="frame-num">          #        </li>        <li class="slider">          <input type="range">        </li>      </ul>    </div>  </section>