jquery - 增加子元素宽度超出父元素

Question

增加子元素宽度导致超出父元素大小。子元素只增加右侧而不是左侧，因此我将 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>

JQUERY :

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

});

jsfiddle:

Answer 1

只需对值添加简单检查以确保它不大于元素。

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

https://jsfiddle.net/Panomosh/kwbr35uw/1/

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