Practicing with the Resize property


by Jeremy Caudle
code

Having spent very little time working with the resize property, I thought I'd give it a try. A lot of these tend to be me just trying new things out. I think that's alright. I'll do bigger and better things at a different time.

Testing the resize property in CSS

I've never used the resize property, so I wanted to do some quick practice with it.

This textbox can only be 7rem tall and resized vertically.
This textbox can only be 100% of its container and resized horizontally.

View the code:

HTML and JS 
<div class="codedoodle-block">
        <h1>Testing the resize property in CSS</h1>
        <p>I've never used the resize property, so I wanted to do some quick practice with it.</p>
        <h6>This textbox can only be 7rem tall and resized vertically.</h6>
        <textarea class="resize-vert"></textarea>
        <h6>This textbox can only be 100% of its container and resized horizontally.</h6>
        <textarea class="resize-horz"></textarea>
    </div>
CSS 
/* Variables */

        :root {
            --blue: rgb(45, 45, 207);
            --red: rgb(196, 20, 20);
        }

        div.codedoodle-block {
            background-color: transparent;
            margin: 3rem auto;
            padding: 1rem;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border-radius: .5rem;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: flex-start;
            background-color: #dedede;
            width: 20em;
        }

        .resize-vert {
            width: 100%;
            resize: vertical;
            max-height: 7rem;
        }

        .resize-horz {
            width: 100%;
            resize: horizontal;
            min-width: 10rem;
            max-width: 100%;
        }

Tags