<h1>Resizable cotnainer example</h1>

<p>This is ane example of a resizable box. The default value is 300px X 300px. The minimum size is 100px X 100px and the mximum size is 500px X 500 px</p>

<p>To resize click on the lower right corner of the purple box and drag it around.</p>

<p>The demo is mean to acompany the <a href="">Resizing with CSS</a> blog post</p>

<div class="container"></div>
body {
  font-family: Raleway, sans-serif;
  margin: 2rem;
}

p {
  width: 70ch;
  size: 1rem;
}

.container {
  background-color: rebeccapurple;

  height: 300px;
  width: 300px;

  resize: both;
  overflow: auto;

  min-width: 100px;
  max-width: 500px;

  min-height: 100px;
  max-height: 500px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.