<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.