title: Inner div should stay always inside outer div
body: <p>I have a div (outer div; that's what I named it). It contains an aside now (like an inner div). I am trying to make this aside stay inside the outer div always.</p>
  
  <p>Now let me give you a description about my aside:</p>
  
  <p>1) It's draggable (Obviously)
  2) Zoom in/Zoom out.</p>
  
  <p>I am trying to make sure that the aside always stays inside the outer div even if we drag/zoom it to any extent. It's kinda working that way. But the aside upon zooming leaves the boundary of the outer div.</p>
  
  <p>How can I prevent that from happening?</p>
  
  <p>FYI, I ain't a CSS guy.</p>
  
  <p>PS: If I change that aside into another div (let's name it inner div), the div loses it's drag-ability. It's a big deal in country side.</p>
  
  <p>Help? Gracias.</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div style="position:relative;background-color:#ffff99;"&gt;
  &lt;aside  draggable="true" id="dragme" class="imgContent"&gt;
      This is an aside, drag me.
  &lt;/aside&gt;    
  This is the parent div.
   &lt;br&gt;
  This is the parent div.
  This is the parent div.
  &lt;br&gt;
  The aside should always stay inside this div.
  &lt;br&gt;
  I am trying to make sure that the aside won't zoom more than the outer div's boundary.
  &lt;br&gt;
  What should be done to acheive that?
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>aside { 
      position:  absolute;
      left: 0;
      top: 0;
      width: 200px; 
      background: rgba(255,255,255,0.66); 
      border: 2px  solid rgba(0,0,0,0.5); 
      border-radius: 4px; padding: 8px;
  }
  
  .imgContent 
  {  width:120px; height:75px; resize:both; overflow:hidden; background-color:#ffff99; padding:5px;}
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/iamsajeev/1ssnp35v/2/" rel="nofollow">Fiddle</a></strong></p>