title: page resizing issue.the child div not resize like parent div
body: <p>i am now struggle with a resizing issue. in my page i have a main div and  inside that div i have several div.the main div is now re-sizable but the child div contents are gone out side of the main div when i resize the page .with out scrollbar how can i solve this problem</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .contentcolumn {
      border-width: 1px;
      border-style: solid;
      margin-left:108px;
      margin-right:48px;
      height: calc(100% - (150px + 50PX));
     
  }
          body,html{
              
     
      height: 100%;
          }
         </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contentcolumn"&gt;
    &lt;div&gt;hai&lt;/div&gt;
      &lt;div&gt;haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai&lt;/div&gt;
      &lt;div&gt;haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai&lt;/div&gt;
      &lt;div&gt;haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai&lt;/div&gt;
      &lt;div&gt;haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai&lt;/div&gt;
      &lt;div&gt;haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai&lt;/div&gt;
      &lt;div&gt;haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai&lt;/div&gt;
      &lt;div&gt;haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai&lt;/div&gt;
      &lt;div&gt;hai&lt;/div&gt;
      &lt;div&gt;hai&lt;/div&gt;
      &lt;div&gt;hai&lt;/div&gt;
      &lt;div&gt;hai&lt;/div&gt;
      
      &lt;div&gt;hai&lt;/div&gt;
      </code></pre>
  </div>
  </div>
  </p>