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

Question

我有一个问题:我的 div(红色的)在 table-td(我无法更改)内，正在使父容器增长并显示滚动条，无论我的百分比是多少用于我的 div 宽度。

下图显示了实际问题:

我也有一个 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;
}

表格宽度为100%列为 80%我的 div 是 50%

但不知何故这些百分比没有被考虑..

注意* 我无法更改表格或主体 div，因为我的 html 代码是动态嵌入的，它不应影响其边界之外的任何内容

Answer 1

像这样？

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

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