我的html div正在使其父容器超出其限制

Question

I have a problem: My div (red one) that is inside a table-td (that I cannot change), is making the parent container grow and show a scroll not matter which percentage I use for my div width.

The following image shows the actual problem:

I also have an example in fiddle

Fiddle Code

<div class="principal"> 
<table width="100%" class="sometable"><tbody><tr><td> 

    <!-- my code starts here -->
<div id="div_translation_container">
    <div class="taxonomy_section_body">
        <div class="taxonomy_section_row">
          <div class="taxonomy_section_cell">6000 ABD</div>
          <div class="taxonomy_section_cell">
             i
          </div>
          <div class="taxonomy_section_cell">
             i
          </div>
          <div class="taxonomy_section_cell">
             i
          </div>
          <div class="taxonomy_section_cell">
             i
          </div>
            <div style="clear: both;"></div> 
        </div>
   </div>
</div>
<!-- my code ends here -->


    </td>
    </tr>
    </tbody>
</table>
</div>

CSS

.principal{
    width:900px;
    background-color:black;
    overflow:auto;
}

#div_translation_container{
    background-color:red;
    border-top: 2px solid #141414;
    padding-top: 10px;
    width: 50%;
}

.taxonomy_section_body {
    display: inline-block;
    margin: auto;
    min-height: 10px;
    overflow-x: auto;
    width: 100%;
    margin-bottom: 10px;
}

.taxonomy_section_row {
    background-color: yellow;
    white-space: nowrap;
}

.taxonomy_section_cell {
    background-color: blue;
    display: inline-block;
    width: 250px;
    overflow: hidden;
    height: 30px;
    white-space: nowrap;
    padding: 5px;
    text-align: center;
}

The table width is 100% The columns is 80% and my div is 50%

but somehow these percentages are not considered..

NOTE* I cannot change the table or the principal div because my html code is encrusted dynamically, and it shouldn't affect anything outside its boundaries

Answer 1

Like this?

#div_translation_container{
.....
position:absolute;
}

Fiddle : https://jsfiddle.net/hoj2Lwdv/1/

Answer 2

If I understand your problem correctly, just remove overflow or make overflow:hidden to .principal:

.principal{
    width:900px;
    background-color:black;
    overflow:hidden;
}

Answer 3

I'm not sure if this is what you're looking for. Initially, you had your section body display property set to inline-block. I only removed it, since all your divs are wrapped inside the table (display:table if you were to style it in CSS) to avoid display issues.

Fiddle

.principal{
width:600px;
height: 300px;
background-color:black;
overflow:auto;

}

#div_translation_container{
background-color:red;
border-top: 2px solid #141414;
padding-top: 10px;
width: 60%;
position:absolute;

}

.taxonomy_section_body {

margin: auto;
min-height: 10px;
overflow-x: auto;
width: 100%;
margin-bottom: 10px;

}

.taxonomy_section_row {
background-color: yellow;
white-space: nowrap;

}

.taxonomy_section_cell {
background-color: blue;
display:inline-block;
width: 250px;
overflow: hidden;
height: 30px;
white-space: nowrap;
padding: 5px;
text-align: center;

}