React+TailwindCSS中flex-wrap下textarea resize异常问题求助

我用ReactJS和TailwindCSS开发项目，制作了一组可调整大小的textarea网格，整体效果基本符合预期，但存在问题：调整屏幕右侧元素时，flex-wrap会导致该元素换行，此时正在进行的resize操作会重新计算布局，textarea与鼠标位置发生错位，引发异常。想了解是否有办法实现预期效果，求提示或解决方法。

代码示例 #

HTML结构 #

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

CSS样式（对应Tailwind可转译为工具类） #

.container{
  min-height: 100vh;
  background-color: lightgray;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

textarea {
  resize: both;
  height: 200px;
  width: 250px;
  max-height: 400px;
  max-width: 550px;
}

问题图示 #

调整resize时的textarea状态：

超出flex限制换行后的情况：

解决思路与方案 #

1. 临时锁定resize时的Flex布局 #

在用户开始拖动resize手柄时，给容器添加flex-nowrap类禁用换行；resize结束后恢复flex-wrap。这样能避免resize过程中布局突变导致的鼠标错位。

结合React实现的示例：

import { useState } from 'react';

const TextareaGrid = () => {
  const [resizing, setResizing] = useState(false);

  return (
    <div className={`min-h-screen bg-gray-200 flex gap-2.5 ${resizing ? 'flex-nowrap' : 'flex-wrap'}`}>
      {Array.from({ length: 6 }).map((_, idx) => (
        <textarea
          key={idx}
          onMouseDown={() => setResizing(true)}
          onMouseUp={() => setResizing(false)}
          className="resize-both h-[200px] w-[250px] max-h-[400px] max-w-[550px]"
        />
      ))}
    </div>
  );
};

2. 改用Grid布局（推荐） #

Grid布局对网格类元素的布局逻辑更稳定，resize单个元素时不会轻易触发整体换行或位置突变。通过auto-fill和minmax配置，能自动适配容器宽度调整列数。

Tailwind实现示例：

<div className="min-h-screen bg-gray-200 grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-2.5">
  <textarea className="resize-both h-[200px] max-h-[400px] max-w-[550px]" />
  <textarea className="resize-both h-[200px] max-h-[400px] max-w-[550px]" />
  <textarea className="resize-both h-[200px] max-h-[400px] max-w-[550px]" />
  <textarea className="resize-both h-[200px] max-h-[400px] max-w-[550px]" />
  <textarea className="resize-both h-[200px] max-h-[400px] max-w-[550px]" />
  <textarea className="resize-both h-[200px] max-h-[400px] max-w-[550px]" />
</div>

3. 给右侧元素禁用flex收缩 #

如果必须保留Flex布局，可给textarea添加flex-shrink-0类，确保元素不会因空间不足换行，但可能导致容器出现横向滚动条，需根据场景权衡。

<textarea className="resize-both h-[200px] w-[250px] max-h-[400px] max-w-[550px] flex-shrink-0" />

内容的提问来源于stack exchange，提问作者Filipe Henrique