wrong max height when using maxRows and boxSizing "border-box"

[FrancescoCioria]

description

If the textarea has box-sizing: border-box and some padding, the max height computed to have the desired maxRows is wrong.

how to reproduce

• <TextareaAutosize style={{ boxSizing: 'border-box', padding: 10 }} maxRows={3} />

specs

if this.props.maxRows then pass { boxSizing: 'content-box' } to the textarea by default as style.
this inline style should be overridable by this.props.style

misc

{optional: other useful info}

[supersetapp]

I ran into a similar issue when I’m passing in style={{ maxWidth: '330px' }} to a component that also has CSS giving it 20px padding and box-sizing border-box.

I tested this out directly with the autosize library and I was unable to reproduce the issue. I found that if I added the additional style values: { overflow: hidden; overflow-wrap: break-word; }, then the scroll bars disappeared. I noticed that when I ran autosize directly it was adding that styling to my textarea, so I tested it out in my react case and it worked like a charm.

I think there should be a better solution than the one proposed in PR #87 — because that one is just overriding style to make things box-sizing: content-box, which could lead to unexpected rendering bugs for developers, e.g., if you made { width: 100%; padding: 20px; } change from border-box to content-box, then the textarea would suddenly expand 40px wider than it’s container.