html - Content expands container -

i have 3 columns page-proofs on div display table. first here jsfiddle https://jsfiddle.net/9mzuxza9/2/ inside left side placed table many rows example , result of when content inside col become higher container , container spreads height want container keep in same height screen no content. css

 html,body{             width: 100%;             height: 100%;         }         .row{             table-layout: fixed;             display: table;             height: 100%;             width: 100%;             border: 1px solid grey;         }         .left {             width:300px;             height:100%;             display: table-cell;         }         .middle {             height:100%;             display: table-cell;             width:100%;         }         .right {             height:100%;             width:300px;             display: table-cell;         } 

html

        <div class="row">         <div class="left"> content <table border="1">                 <thead>                     <tr>                         <th></th>                         <th></th>                     </tr>                 </thead>                 <tbody>                     <tr>                         <td></td>                         <td></td>                     </tr>                     <tr>                         <td></td>                         <td></td>                     </tr>                     <!-- ...more rows-->                 </tbody>             </table>         </div>         <div class="middle"> should fill space left </div>         <div class="right"> other content </div>     </div> 

you need fixed height , overflow: scroll. these won't work on table-cell element, have outer div layout floating elements or inline-block elements:

div.left {     float: left;     overflow: scroll;     height: 100px; // or whatever }  

alternatively, leave div.left , use separate container div inside it, around child table. compare question: how create table cell scrolls when overflowing