CODEWITHSUNDEEP
htmlcss
carefulnow1
carefulnow1

Reputation: 841

Stop a textarea element leaving its parent?

I have the following code:

<html>
    <body style="background-color:#800000;">
        <div style="background-color:#000;margin:0 auto;height:800px;width:800px;">
            <textarea style="background-color:#666666;"></textarea>
        </div>
    </body>
</html>

As you can see, it has a dark red background, a black div and a grey textarea element. When I resize the textarea, the following happens: https://i.imgur.com/sfwTtd5.gifv. Even though the textarea is clearly inside the div (it's parent), it is still leaving it. How can I make it so the textarea cannot have a bigger width or height than its parent?

Upvotes: 1

Views: 44

Answers (1)

Daniel A. White
Daniel A. White

Reputation: 190943

Set a max-widthand a max-height.

<html>
    <body style="background-color:#800000;">
        <div style="background-color:#000;margin:0 auto;height:300px;width:300px;">
            <textarea style="background-color:#666666;max-width:100%;max-height:100%;"></textarea>
        </div>
    </body>
</html>

Upvotes: 1

Related Questions