CODEWITHSUNDEEP
htmlcsstextareawidth
Steve
Steve

Reputation: 70

Textarea at 100% width fills container but div at 100% width expands the parent

I'm having an interesting problem that I'm hoping someone can help with. I have a textarea that when set at 100% width, fills the parent div that it's in. HOWEVER, if I replace that with a div, the div blows out the parent divs width to now fit the child's content instead of wrapping.

I've tried various approaches (display:inline-block, display:table, display:table-cell, box-sizing...) I've used span, div, p and table/tr/td.. all result in the following overflow.

TextArea

Div Tag

Box-sizing src

I've inspected the source, and all I see is the textarea's width being set to 100% with no other styles affecting it.

Is there's an attribute I'm missing when I'm inspecting?

Upvotes: 0

Views: 95

Answers (3)

Steve
Steve

Reputation: 70

Due to the complexity of the application, I'll need to strip it down to the basics and figure it out. I was hoping that there was a structural component of the textarea that I didn't know about.

Thanks,

Upvotes: 0

nashcheez
nashcheez

Reputation: 5183

Basically, your div might have padding also. Now when you add the padding with width: 100%, the child will basically overflow the parent cause of the extra padding.

To include padding within the width try providing your div a box-sizing: border-box;.

You can read more about box-sizing here.

Upvotes: 0

Serg Chernata
Serg Chernata

Reputation: 12400

My guess is that you simply need to utilize border box:

*{ box-sizing: border-box; }

Upvotes: 1

Related Questions