высота меняется после и до перелива

У меня есть стол. элементы в таблицу добавляются динамически.

Это то, что я вижу перед переполнением:

Это то, что я вижу после переполнения:

Html

<div class="thirdDiv">
                 <div class="slNewClass">
                     <div class="details">
                         <span class="content">Service Level</span>
                         <span id="slSpan" class="value">0%</span>
                     </div>
                 </div>
                 <div class="agent-table-wrap">
                     <table id="agentsTable">
        <tbody><tr id="agentsNames" class="psdg-top">
            <td class="title">Agent Name</td>
            <td class="breakAgentClass">William</td>
            <td class="idelAgentClass">Totti</td>
            <td class="pauseAgentClass">John</td>
            <td class="talkingAgentClass">Sarah</td>
            <td class="voicemailAgentClass">Mike</td>
            <td class="breakAgentClass">William</td>
            <td class="idelAgentClass">Totti</td>
            <td class="pauseAgentClass">John</td>
            <td class="talkingAgentClass">Sarah</td>
            <td class="voicemailAgentClass">Mike</td>
            <td class="breakAgentClass">William</td>
            <td class="idelAgentClass">Totti</td>
            <td class="pauseAgentClass">John</td>
            <td class="talkingAgentClass">Sarah</td>
            <td class="voicemailAgentClass">Mike</td>
        </tr>
    </tbody></table>

                 </div>
             </div>

Css

.slNewClass {
    width:20%;
    background-color:#e5412d;
    float:left;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
}
.thirdDiv {
    width:100%;
    margin-top:10px;
    overflow:auto;
}

.slNewClass .content {
display: block;
font-size: 20px;
font-weight:bold;
font-weight: 600;
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
}
.slNewClass .value {
display: block;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
font: 13px/1.7em "Open Sans", "trebuchet ms", arial, sans-serif;
font-size: 32px;
font-weight: 600;
color:white;
}

.slNewClass .details {
position: relative;
margin-left:15px;
z-index: 11;
float: left;
margin-top: 15px;
text-align: left;
}


.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;
    width:75%;
    overflow-x:auto;
    /*background-color:#0c2a62;*/
}

.agent-table-wrap table{
    border-collapse: collapse;
}

.agent-table-wrap td{
    padding: 10px 15px;
    /*border:1px solid #CED9EC; */
    border:1px solid #FFF; 
}

почему высота меняется, пожалуйста, и как ее исправить?