When I increase the width of a child element, it sometimes goes outside the boundaries of its parent element. The child element tends to only expand towards the right side, so I tried using the float property on the child element. Is there a CSS trick that can help me restrict the width of the child element from going beyond that of its parent?
Here is the code snippet:
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());
}
}