宽度为100％的Textarea会填充容器，但宽度为100％的div会扩展父级

Question

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?

Answer 1

我的猜测是，您只需要利用边框 ：

*{ box-sizing: border-box; }

Answer 2

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 .

Answer 3

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,