html - 文本区域不会让 parent 成长

Question

我在一个最大高度为 80 的 div 内的表单中有一个 textarea。我的问题是当 textarea 中的文本太长时，textarea 应该从它的初始高度增长到 cb-input div 的最大高度到它的初始高度。

<div class="cb-input">
  <form class="cb-form" action="">
    <textarea></textarea>
  </form>
</div>

这些是我的 CSS 类。

.cb-input {
  width: 100%;
  min-height: 45px;
  max-height: 80px;
}

.cb-form {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.cb-input textarea{
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  padding: 6px 14px 2px 10px;
  width: 100%;
  height: 100%;
  font-family: Roboto;
  font-size: 14px;
  border: none;
  resize: none;
  overflow-y: auto;
}

我不知道文本是否只是因为 overflow-y: auto 而没有增长，但也许吧。有什么想法吗？

Answer 1

这是一个有效的 fiddle

height can be adjusted by changing the css.

希望对您有所帮助。