html - 在调整文本区域大小时调整固定宽度的容器

Question

我正在创建一个双列布局，其中一个 div 向左浮动(宽度几乎为 50%)，另一个 div 向右浮动。在这些 div 中，我正在显示一个文本区域。这在原则上工作正常，并且可以很好地将列的宽度调整为可用宽度。

但是，当有人使用浏览器的textarea调整大小功能(例如在Firefox中)改变textarea的大小时，div并没有调整。这样做的结果是文本区域被调整大小，但延伸到 div 之外(或者只是被截断)。

我能以某种方式解决这个问题吗？

MWE:

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

Answer 1

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

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