How to make textarea 100% without overflow when padding is present ?

Last Updated : 22 Mar, 2021

If we have given an HTML document containing <textarea> element and its parent element contains some padding then how to make textarea width to 100%. textarea contains.
The idea is to create a div with the class name “wrapper”. Inside that <div> element, we create a text area with a certain number of columns and rows. In this case, it is 30 and 15 respectively. After that, we set the width property to 100% to make a textarea width 100%.

HTML Code: The HTML code contains a <textarea> element that holds rows and columns values.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to make 100% tetxarea
        without overflowing when
        padding is pressent?
    </title>
</head>
 
<body>
    <div class="wrapper">
        <textarea cols="30" rows="15"></textarea>
    </div>
</body>
 
</html>

CSS Code: The CSS code contains the wrapper class that holds padding, margin, and background-color property. The textarea element contains the width property.

CSS

<style>
    .wrapper {
        padding: 20px;
        margin:15px 0;
        background-color: #0f9d58;
    }
     
    textarea {
        font-size:20px;
        width:100%;
    }
</style>

Complete Code: In this section, we will combine the above two sections to make the width of <textarea> element 100% without overflowing when padding is present.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to make 100% tetxarea
        without overflowing when
        padding is pressent?
    </title>
 
    <style>
        .wrapper {
            padding: 20px;
            margin: 15px 0;
            background-color: #0f9d58;
        }
 
        textarea {
            font-size: 20px;
            width: 100%;
        }
    </style>
</head>
 
<body>
    <div class="wrapper">
        <textarea cols="30" rows="15"></textarea>
    </div>
</body>
 
</html>