Flex容器中textarea与按钮设90%/10%宽度却换行的问题

核心问题 #

你设置的flex-flow: row wrap允许元素在空间不足时换行，再加上textarea默认采用box-sizing: content-box盒模型（实际宽度=设置的width+padding+border），配合justify-content: space-around给元素添加的额外间距，最终导致90%+10%的宽度总和加上这些额外空间超过了容器宽度，按钮因此被挤到下一行。

修复方案 #

基础修复（强制一行显示） #

1. 给所有flex子元素设置box-sizing: border-box，让width包含padding和border，避免额外尺寸溢出
2. 将flex-flow: row wrap改为flex-flow: row nowrap，强制元素在一行排列
3. 把justify-content: space-around换成flex-start，取消不必要的间距占用空间

修改后完整代码

CSS

.chatFooter { /* footer */
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  box-sizing: border-box;
}
.chatInput {
  height: 100%;
  width: 90%;
  outline: none;
  resize: none;
  font-size: 1em;
  font-family: inherit;
  background-color: white;
  box-sizing: border-box;
  border: none; /* 可选：不需要边框可移除，有边框也会被包含在width内 */
}
.chatSendBtn {
  height: 100%;
  width: 10%;
  font-size: 1.3em;
  background-color: white;
  color: black;
  cursor: pointer;
  box-sizing: border-box;
  border: none; /* 可选 */
  margin: 0; /* 清除默认margin */
}
.chatSendBtn:hover {
  color: red;
}

HTML

<div class="chatFooter">
  <textarea
     class="chatInput"
     placeholder="Enter message"
  ></textarea>

  <div class="chatSendBtn">
    Send
  </div>
</div>

适配性优化（保留响应式换行能力） #

如果需要在小屏幕上允许元素自动换行，推荐用flex比例分配空间替代固定百分比，这样元素会自动适配容器宽度，不会出现溢出换行：

.chatFooter {
  width: 100%;
  display: flex;
  gap: 0; /* 可根据需求设置元素间间距 */
  box-sizing: border-box;
}
.chatInput {
  flex: 9; /* 占据9/10的空间 */
  height: 100%;
  outline: none;
  resize: none;
  font-size: 1em;
  font-family: inherit;
  background-color: white;
  box-sizing: border-box;
}
.chatSendBtn {
  flex: 1; /* 占据1/10的空间 */
  height: 100%;
  font-size: 1.3em;
  background-color: white;
  color: black;
  cursor: pointer;
  box-sizing: border-box;
}
.chatSendBtn:hover {
  color: red;
}

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