Reputation: 70
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.
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
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
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
Reputation: 12400
My guess is that you simply need to utilize border box:
*{ box-sizing: border-box; }
Upvotes: 1