我的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

我不确定这是否是您正在寻找的。最初，您将截面体显示属性设置为内联块。我只删除它，因为所有的div都包含在表中（显示：table，如果你要在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;

}