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

Question

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

下图显示了实际问题：

我在小提琴中也有一个例子

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;
}

小提琴：https://jsfiddle.net/hoj2Lwdv/1/

Answer 2

如果我正确理解您的问题，只需删除溢出或使溢出：隐藏到 .principal：

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

Answer 3

我不确定这是否是您要查找的内容。最初，您将部分正文显示属性设置为 inline-block。我只删除了它，因为您所有的 div 都包裹在表格中（如果您要在 CSS 中设置样式，则显示：表格）以避免显示问题。

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;

}