React中如何实现内容垂直下移换行？contentEditable不换行问题求助

我给容器设置了contentEditable='true'属性，但里面的内容还是无法自动换行到下一行，以下是我的React代码和样式：

React代码 #

<div className={styles.searchContainer} contentEditable='true'>
  <div>John1</div>
  <div>John2</div>
  <div>John3</div>
  <div>John4</div>
  <input value={searchInput} onChange={e => this.handleTagInputChange(e.target.value)}
    onFocus={this.toggleContents}>
  </input>
</div>

CSS样式 #

.searchContainer {
  min-height: 30px;
  display: flex;
  position: relative;
  overflow-y: scroll;
}

解决思路 #

• 添加flex换行属性：flex容器默认是flex-wrap: nowrap，会强制所有子元素在一行显示，不会自动换行。给.searchContainer添加flex-wrap: wrap即可让内容自动换行：

  .searchContainer {
    min-height: 30px;
    display: flex;
    position: relative;
    overflow-y: scroll;
    flex-wrap: wrap; /* 新增这一行 */
  }
  

• 优化子元素布局：如果希望每个子元素（比如包含John的div）在换行时能自适应宽度，可以给它们添加flex: 0 0 auto或者调整宽度属性，避免被过度挤压。

• 修复contentEditable与input的冲突：把input放在contentEditable='true'的容器内会导致交互异常（容器和input都具备可编辑能力，容易出现输入逻辑混乱），建议将input移出该容器，重新规划布局结构，比如把容器和input设为同级元素。

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