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

Question

我有一個問題：位於table-td（我無法更改）中的div （紅色）使父容器增長並顯示滾動，無論我為div寬度使用哪個百分比。

下圖顯示了實際的問題：

我也有一個小提琴的例子

小提琴代碼

<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中設置樣式，則為display：table），以避免顯示問題。

小提琴

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

}