overflow is not working in this code

Question

I have a table contains item. the items are in the x axis. I want to handle the overflow by adding a horizantal scrol on that table.

This is my css

.agent-table-wrap {
    margin:0;
    padding:2px;
    /*margin-top:5px;*/
    margin-bottom:10px;
    margin-left:4%;
    font: 14px Arial,Helvetica,sans-serif;
    color:#747474;
    display: inline-block;
    padding-top:0px;
    /*background-color:#0c2a62;*/
    overflow:auto;
}

This is my html:

<div class="thirdDiv">
                 <div class="slNewClass">
                     <div class="details">
                         <span class="content">Service Level</span>
                         <span class="value" id="slSpan" runat="server">0%</span>
                     </div>
                 </div>
                 <div class="agent-table-wrap">
                     <table id="agentsTable" runat="server">
                         <tr class="psdg-top" id="agentsNames">
                             <td class="title">Agent Name</td>
                         </tr>
                         <tr class="psdg-middle" id="agentsStatuses">
                             <td class="title">Agent Status</td>
                         </tr>
                     </table>
                 </div>
             </div>

but the scrol becomes on all the page, not just on the table

check this please:

Before overflow:

After overflow:

Answer 1

You will need to set a width otherwise it will adopt a width of 100%. Also you may wish to specify overflow-x: scroll; to apply scrolling horizontally only.

.slNewClass {
   width: 15%;
}

.agent-table-wrap {
    width: 80%;
    margin:0;
    padding:2px;
    /*margin-top:5px;*/
    margin-bottom:10px;
    margin-left:4%;
    font: 14px Arial,Helvetica,sans-serif;
    color:#747474;
    display: inline-block;
    padding-top:0px;
    /*background-color:#0c2a62;*/
    overflow-x: scroll;
}

Answer 2

Is this what you are looking for

Fiddle

 .thirdDiv{max-height:200px; overflow:auto}