Incresing Ширина дочернего элемента выходит за пределы родительского элемента

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/

Очевидно, что это не является идеальным, как я указал максимальное значение ширины вручную, и вы хотите, чтобы это было динамичным. Но ты получил идею.

Answer 2

Есть ли какой-либо трюк CSS для этого?

Да, если контейнер с и расположение элементов являются статическими или сохранить условия в вашем примере ...
то, правило, которое вы ищете, max-width

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

    then: 
    500 - 3 - 300 = 197 
*/ 

#input1 { 
    max-width: 197px 
} 

Смотрите обновленную скрипку: https://jsfiddle.net/kwbr35uw/2/

сейчас ..
если размер, положение и другие свойства являются динамическими, то лучше идти с javascript/jQuery решение ..
как один предложенный @joshStevenson ^{(но с динамическими мерами конечно)}