如何让可resize的textarea调整大小时不会溢出外层容器

问题原因 #

外层容器.ctnb设置了固定高度height:220px，而textarea开启了resize: vertical允许垂直调整尺寸，当textarea被拉伸到超出容器剩余可容纳高度时，就会出现溢出容器的问题，fixed定位无法解决内容溢出的场景。

解决方案（3种可选，按需使用） #

• 方案1：给容器添加溢出滚动效果
  给.ctnb添加overflow: auto属性，内容超出容器高度时会自动出现滚动条，不会让元素溢出到容器外。
  修改后的CSS代码：

  .ctnb{
     background: black;
     opacity: 0.4;
     width: 665px;
     border-radius: 4px;
     margin-left: 0px; 
     margin-top: 30px;
     height: 220px;
     overflow: auto; /* 新增属性 */
  }
  

• 方案2：限制textarea的最大拉伸高度
  计算容器内除了textarea之外的元素总高度，给textarea设置max-height限制最大拉伸高度，避免超出容器，数值可以根据实际布局微调：
  修改后的textarea CSS代码：

  .surb textarea{
    margin-top: -12px;
    width: 566px;
    height: 105px;
    box-sizing: border-box;
    border: none;
    outline-color: black;
    padding-right: 10px;
    padding-left: 11px;
    font-size: 18px;
    padding-top: 9px;
    border-radius: 2px;
    min-height: 105px;
    resize: vertical;
    position: inherit;
    max-height: 120px; /* 新增属性，可自行调整数值 */
  }
  

• 方案3：让容器高度自适应内容
  把.ctnb的固定高度height:220px改为最小高度min-height:220px，容器会随内部元素高度自动撑开，永远不会出现内容溢出。
  修改后的CSS代码：

  .ctnb{
     background: black;
     opacity: 0.4;
     width: 665px;
     border-radius: 4px;
     margin-left: 0px; 
     margin-top: 30px;
     min-height: 220px; /* 替换原来的height:220px */
  }
  

额外优化建议 #

• 你同时给textarea设置了height:105px和min-height:105px，属性重复，无特殊需求可以删除min-height配置。
• 尽量避免使用margin-top: -12px这类负边距调整位置，容易引发布局错位，可通过调整父元素.surb的padding-top实现同样的效果。

内容的提问来源于stack exchange，提问作者owl Hld