页面大小调整问题。子div不像父级div调整大小

Question

我现在正在为调整大小问题而苦恼。在我的网页中我有一个主要的div和内部该div我有几个div.the主div现在是可以重新调整大小，但当我调整页面大小时，子div内容已经不在主侧div的一侧了。滚动条我怎样才能解决这个问题

.contentcolumn { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    margin-left:108px; 
 
    margin-right:48px; 
 
    height: calc(100% - (150px + 50PX)); 
 
    
 
} 
 
     body,html{ 
 
      
 
    
 
    height: 100%; 
 
     } 
 
    

<div class="contentcolumn"> 
 
    <div>hai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    
 
    <div>hai</div> 
 

Answer 1

添加字断你的元素

http://www.w3schools.com/cssref/css3_pr_word-break.asp

.contentcolumn { 
 
     border-width: 1px; 
 
     border-style: solid; 
 
     margin-left:108px; 
 
     margin-right:48px; 
 
     height: calc(100% - (150px + 50PX)); 
 
     word-break: break-all; 
 
    }

<div class="contentcolumn"> 
 
    <div>hai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    
 
    <div>hai</div> 
 
    
 
</div>

Answer 2

股利不调整，但由于文字是它溢出了DIV的长时间不间断的字符串。

解决方法是在.contentcolumn上使用word-break: break-all，这会将溢出文本移动到新行上。