title: Dynamically increase height of div using css
body: <p>The div comes with a scroll bar instead increasing it height. I don't want the scroll to come instead the div should increase its height.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="widgetContainer"&gt; 
      &lt;div id="5395634ee4b071f136e4b68e" style="background-color: red;"&gt;node1&lt;div id="53956358e4b071f136e4b690" style="background-color: red;"&gt;vip1&lt;div id="539803eae4b0ffad82491508" style="background-color: gray;"&gt;obj1&lt;/div&gt;&lt;div id="5395635ee4b071f136e4b691" style="background-color: green;"&gt;obj2&lt;/div&gt;&lt;div id="539803e4e4b0ffad82491507" style="background-color: green;"&gt;obj3&lt;/div&gt;&lt;/div&gt;&lt;div id="539803f2e4b0ffad82491509" style="background-color: blue;"&gt;vip2&lt;/div&gt;&lt;/div&gt;&lt;div id="5395637fe4b071f136e4b692"&gt;node2&lt;div id="539803eae4b0ffad82491501" style="background-color: green;"&gt;vip1&lt;/div&gt;&lt;div id="5395635ee4b071f136e4b694" style="background-color: green;"&gt;vip2&lt;/div&gt;&lt;/div&gt;&lt;div id="53956371f136e4b692" style="background-color: red;"&gt;node3&lt;/div&gt;&lt;div id="5656" style="background-color: red;"&gt;node4&lt;/div&gt;&lt;div id="5395637fe4b071f13b692" style="background-color: red;"&gt;node5&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.widgetContainer {
  
      height: 100%;
      width: 100%;
      background-color: white;
      display: block;
      position: relative;
      color: black;
  
  }
  
  .widgetContainer &gt; div {
      float:left;
      width: 30%;
      min-height: 100px;
      margin: .5%;
      overflow: auto;
      -webkit-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
      -moz-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
      box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
      border: 0.25% solid;
  
  
  }
  .widgetContainer &gt; div div {
  
      width: 80%;
      height: 100px;
  
      margin: 1.5% auto;
      overflow: auto;
      -webkit-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
      -moz-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
      box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
      border: 0.25% solid;
  
  
  }
  </code></pre>
  
  <p>Below is the fiddle i have tried,</p>
  
  <p>My fiddle: <a href="http://jsfiddle.net/u5j0z6ut/" rel="nofollow">http://jsfiddle.net/u5j0z6ut/</a></p>