Jquery 增加子元素宽度会超出父元素

增加子元素宽度，导致超出父元素大小。子元素只增加右侧而不是左侧，所以我将float属性指定给子元素。如何将子元素宽度限制在父元素之外

这有什么CSS技巧吗

这是我的密码

HTML:

<div id="tdScreen" style="width: 500px; height: 300px;position:relative;border:3px solid black" class="ui-selectable ui-droppable"><textarea id="input1" rows="1" style="float: left; resize: horizontal; position: absolute; overflow: hidden; cursor: pointer; width: 100px; top: 100px; left: 300px;"></textarea></div>

$('#incresewidth').on({
   keyup: function (e) {
        if (e.keyCode == 13) {                
           $("#input1").css("width",$('#incresewidth').val());
        }
    }

}))

---

只需添加对值的简单检查，以确保其不大于元素

var amount = $('#incresewidth').val() > 190 ? 190 : $('#incresewidth').val();

显然，这并不理想，因为我已经手动指定了宽度的最大值，您希望它是动态的。但你明白了

这有什么CSS技巧吗

是的，如果包含元素和元素位置的容器是静态的，或者您保持示例中的条件…
那么，你要找的规则是

请参阅更新的小提琴：

现在..
如果维度、位置或其他属性是动态的，那么最好使用

javascript/jQuery

solution..
就像@joshStevenson提出的那样（当然是动态测量）

/*
  if:
    container width: 500px
    container border: 3px
    textarea position left: 300px

  then:
    500 - 3 - 300 = 197
*/

#input1 {
    max-width: 197px
}