css resize smaller than start.

CSS resize which can resize smaller than it's starting size.

HTML

Before

<div class="resize">
  some content<br>
  here
</div>

After

<hr>

Recommended:<br>
<ul>
  <li>add <code>width</code>, <code>height</code> for a sensible starting size.</li>
  <li>add <code>min-width</code>, <code>min-height</code> for a sensible min size so you don't end up with a 0x0 box that is hard to enlarge again.</li>
  <li>add <code>max-width</code>, <code>max-height</code> for a sensible max size so you don't end up dragging the corner outside your window.</li>
</ul>

Notes:
<ul>
  <li>I'm not quite sure how this makes it work.</li>
  <li>It seems to be a bit of a hack and probably wise not to rely on it on production websites.</li>
  <li>It seems to work on browsers that limit the min size to initial size (Webkit e.g. Chrome).</li>
  <li>It has side effects: if you click the element it can shrink to zero size (temporarily).</li>
  <li>The above is more apparent on mobile devices and browsers that do not support resize, 
      and might stay in that state untill clicking or tapping outside the element.</li>
  <li>It is probably wise to use mechanisms to limit it to webkit browsers.</li>
</ul>

CSS

.resize {
  resize: horizontal;
  overflow: hidden;
  width: 50px;
  height: 50px;
  min-width:20px;
  max-width:100px;
}
.resize:active {
  width: 0;
  height: 50px;
}

/* optional add:
.resize {
  width:  <some sensible starting size>;
  height: <some sensible starting size>;
  min-width:  <some sensible min size>;
  min-height: <some sensible min size>;
  max-width:  <some sensible max size>;
  max-height: <some sensible max size>;
}
*/


div {
  display: inline-block;
  background: white;
  border: 1px solid black;
}
code {
  display: inline-block;
  padding: 2px;
  margin: 2px;
  outline: 1px dashed lightgray;
  background: white;
}