Родительский элемент неправильно изменяет размеры с дочерним textarea

Question

У меня есть два элемента, один из которых перемещается влево, а другой - вправо, а его содержимое является элементом textarea. Их ширина установлена ​​на 30% и 60%. Это выглядит хорошо, но когда я изменяю размер текстовой области, родительский элемент изменяет размер странным образом. Textarea выходит за рамки родительского.

Вот простой пример:

<div class="wrapper">
  <div class="left">
    <label>Label</label>
  </div>

  <div class="right">
    <textarea></textarea>
  </div>

  <div style="clear: both;">
  </div>
</div>

.wrapper {
  border: 3px double gray;
  display: inline-block;  
  min-width: 300px;
  overflow: visible;
  padding: 5px;
}

.left {
  float: left;
  text-align: right;
  width: 30%;
}

.right {
  float: right;
  width: 60%;
}

JSFiddle

В чем причина такого странного поведения и что я могу сделать, чтобы исправить его без изменения HTML-кода?

Answer 1

https://jsfiddle.net/0Lq3ks4g/50/

.wrapper {
  border: 3px double gray;
  min-width: 300px;
  overflow: visible;
  padding: 5px;
}

.left {
  float: left;
  text-align: right;
  width: 30%;
}

.right {
  float: right;
  width: 60%;
}

Попробуйте удалить display: inline-block из .wrapper. Тогда родитель также будет расширяться, когда textarea расширяется

Answer 2

Решение: 1

Вы можете установить max-width: 100% на textarea, чтобы оно не выходило за пределы div

.wrapper {
  border: 3px double gray;
  display: inline-block;  
  min-width: 300px;
  overflow: visible;
  padding: 5px;
}

.left {
  float: left;
  text-align: right;
  width: 30%;
}

.right {
  float: right;
  width: 60%;
}
.right textarea {
  max-width: 100%;
}

<div class="wrapper">
  <div class="left">
    <label>Label</label>
  </div>

  <div class="right">
    <textarea></textarea>
  </div>
  
  <div style="clear: both;">
  </div>
</div>

Решение: 2

Вы можете установить resize: none; на teaxtarea, чтобы его нельзя было изменить. Вы можете добавить height и width из textarea согласно вашему требованию

.wrapper {
  border: 3px double gray;
  display: inline-block;  
  min-width: 300px;
  overflow: visible;
  padding: 5px;
}

.left {
  float: left;
  text-align: right;
  width: 30%;
}

.right {
  float: right;
  width: 60%;
}
.right textarea {
  max-width: 100%;
  resize: none;
}

<div class="wrapper">
  <div class="left">
    <label>Label</label>
  </div>

  <div class="right">
    <textarea></textarea>
  </div>
  
  <div style="clear: both;">
  </div>
</div>