StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)
primarykey
Id
3899463
data
AcceptedAnswerId
3899478
AnswerCount
4
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2010-10-10T07:44:40.543
FavoriteCount
17
LastActivityDate
2017-03-28T09:19:41.037
LastEditDate
2014-04-11T15:09:47.527
LastEditorUserId
579240
OwnerUserId
249616
ParentId
0
PostTypeId
1
Score
82
ViewCount
102944
LastEditorDisplayName
text
Body
How can I prevent the textarea from stretching beyond its parent DIV element? I have this textarea inside a table which is inside a DIV and it seems that it causes the entire table to stretch out of its bounds. You can see an example of the same situation even in a more simple case, just putting a text area inside a div (like what is used here in www.stackoverflow.com) You can see from the images below that the textarea can stretch beyond the size of its parent? How do I prevent this? I'm kind of new to CSS so I don't really know what CSS attributes should I be using. I tried several like display, and overflow. But they don't seem to do the trick. Anything else I might have missed? <img src="https://i.stack.imgur.com/uVtrL.jpg" alt="the div section"> <img src="https://i.stack.imgur.com/hN9Ye.jpg" alt="the text area"> UPDATE: HTML CSS <pre><code>textarea { max-width: 50%; } #container { width: 80%; border: 1px solid red; } #cont2{ width: 60%; border: 1px solid blue; } </code></pre> If you put this code inside the <a href="http://jsfiddle.net" rel="noreferrer">http://jsfiddle.net</a>, you will see that they act differently. Although the textarea is limited to the percentage declared in its css style, it is still possible to get it to cause its parent table to be as large as it wants to be, and then you can see that it spills over its parent border. Any thoughts on how to fix this? 
Tags
<css><google-chrome><textarea>
Title
How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USAlain Pannetier
UserOwnerUserId
1. USItay Levin
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.