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

}