我的html div正在使其父容器增長超過其限制

Question

我有一個問題：我的div（紅色的一個）是在表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都被封裝在表格中（如果你想在CSS中設置它的話，可以使用display：table）來避免顯示問題。

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; 

}