title: Change width of div without affecting contents inside
body: <p>I would like to create a set of svg images and place it in a div. When that div gets resized (in javascript), I want the width to change, without changing what's inside it, giving the effect of the resized div covering up the contents (ex. cutting the div's width in half will make half the content inside hidden).</p>
  
  <p>Is this possible through html?</p>
  
  <p>Here is a <a href="https://jsfiddle.net/h2g3sh1s/" rel="nofollow">js fiddle</a>. When you push the button, the div width changes to a smaller size. I want it to hide the portion of the svg outside of it.</p>
  
  <pre><code>&lt;div id="container"&gt;
  
   &lt;svg width="400" height="280"&gt;
    &lt;rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"&gt;&lt;/rect&gt;
  
  
    &lt;rect x="90" y="50" rx="20" ry="20" width="150" height="150" style="fill:blue;stroke:black;stroke-width:5;opacity:0.5"&gt;&lt;/rect&gt;
   &lt;/svg&gt;
  
  &lt;/div&gt;
  </code></pre>