ページリサイズissue.the子divは親divのようにリサイズしません

Question

私は現在、サイズ変更の問題を抱えています。私のページで私はメインのdivとdivの中にいくつかのdiv.theメインのdivを持っている今はre-sizedですが、私はページのサイズを変更すると、子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は、テキストが、それはdiv要素の外に溢れた長い中断のない文字列であることにリサイズしたが原因ありません。

.contentcolumnでword-break: break-allを使用すると、オーバーフローしたテキストが新しい行に移動します。