Html 调整textarea大小时调整固定宽度容器

我创建了一个两列布局，一个div向左浮动（宽度接近50%），另一个div向右浮动。在这些分区中，我显示了一个文本区域。这在原则上可以很好地将列的宽度调整为可用宽度

但是，当有人使用浏览器的文本区域大小调整功能（例如在Firefox中）来更改文本区域的大小时，div不会调整。这样做的结果是文本区域的大小被调整，但扩展到了div之外（或者只是被切断）

我能解决这个问题吗

MWE：

左边
正确的

您只能允许垂直调整大小以避免出现问题

CSS

textarea { resize:vertical; }

textarea { resize:none; }

如果要取消调整大小，请执行以下操作：

CSS

textarea { resize:vertical; }

textarea { resize:none; }

如果要调整大小并展开div，应使用

min height

代替

width

：

HTML

<div style="overflow: hidden;">
    <div style="float: left; min-width: 40%; background: red; padding: 1em;">
        <textarea style="width: 100%">left</textarea>
    </div>
    <div style="float: right; min-width: 40%; background: green; padding: 1em;">
        <textarea style="width: 100%">right</textarea>
    </div>
</div>

左边
正确的

---

您可以禁用文本区域的水平调整大小

textarea {
  resize: vertical; /* you can resize vertically, but not horizontal */
}

---

您想允许用户扩展文本区域大小吗？您可以禁用

textarea

resize:不，我想允许调整大小。谢谢，但我确实想允许调整大小。设置最大宽度：100%；谢谢，但我确实想允许调整大小。很简单，你可以设置

最小宽度：40%

，而不是

宽度：40%

-查看它-