How to Make a Textarea 100% Width Without Overflowing When Padding Is Present in CSS

How can I make a TextArea 100% width without overflowing when padding is present in CSS?

Why not forget the hacks and just do it with CSS?

One I use frequently:

.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

See browser support here.

How to expand textarea width to 100% of parent (or how to expand any HTML element to 100% of parent width)?

<div>  <div style="width: 20%; float: left;">    <p>Some Contentsssssssssss</p>  </div>  <div style="float: left; width: 80%;">    <textarea style="width: 100%; max-width: 100%;"></textarea>  </div>  <div style="clear: both;"></div></div>

How to set textarea to 100% width and height?

The issue is the common white space issue of inline-block/inline element due to vertical alignment. If you check dev tools of google you will see this:

Sample Image

So to fix it you simply need to adjust vertical alignment or make the textarea a block element (like provided in the other answers):

html, body, textarea {  margin: 0;  padding: 0;  border: 0;  width: 100%;  height: 100%;}textarea { vertical-align:top;}
<textarea>Text goes here</textarea>

How to prevent textarea content from overflowing into padding?

I could not find a way of doing it with padding but the same sort of effect can be achieved by setting the top border of the textarea instead of the padding:

body {
background: grey;
}
textarea {
width: 100%;
margin: 0;
border-top-width: 1em;
border-top-color: white;
resize: none;
}
<body>
<textarea name="" id="" cols="30" rows="4"></textarea>
</body>

Textarea to fill a parent container exactly, with padding

Use width: 100%; height: 100%; to make the <textarea> fill up the wrapping <div>. Unfortunately, you won't be able to put on margins/padding, as they get ADDED to the 100%, so the right/bottom edges will overflow.

Edit: To use width: 100%; along with padding, you can change the box sizing model:

    width: 100%;
height: 100%;
box-sizing: border-box;

With this change, 100% now refers to the distance between the outsides of the borders, instead of the distance between the outside of the content.

Textarea doesn't stretch when parent has max-height and overflow scroll

It happens because of the display: flex. you can simply wrap the text area inside an element:

.a {
display: flex;
flex-direction: column;
width: 400px;
max-height: 70px;
overflow-y: scroll;
border: 1px solid red;
}


textarea{
width:100%;
box-sizing: border-box; /* for 100% width https://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present */
}
<div class="a">
<div class><textarea></textarea></div>
<button>Save</button>
</div>

Share the width for menu items with equal padding using CSS

Use this style (everything is dynamic here) -

CSS (modified) -

ul {
width: 600px;
display: flex;
list-style: none;
padding: 0px;
border: solid 1px blue;
}
li {
flex: auto;
text-align: center;
padding: 8px 0;
}
li:hover {
background: blue;
color: white;
cursor: pointer;
}

HTML (no change) -

<ul>
<li>
Test
</li>
<li>
Test Very Very Large Bigger Item
</li>
<li>
Test Bigger item
</li>
</ul>

Working demo here

span padding with width 100% causing unexpected behaviour

It's because of padding. your width is 100% plus padding. To prevent it use box-sizing property.