当在 Flex 容器中为子元素设置百分比宽度（如 90% + 10%）时，若未启用 box-sizing: border-box，边框和内边距会额外增加元素总宽，导致超出容器而换行。本文详解原因并提供兼容性良好的修复方案。
当在 flex 容器中为子元素设置百分比宽度（如 90% + 10%）时，若未启用 `box-sizing: border-box`，边框和内边距会额外增加元素总宽，导致超出容器而换行。本文详解原因并提供兼容性良好的修复方案。
在构建聊天界面底部输入区域时，常见的布局需求是：<textarea></textarea> 占据容器宽度的 90%，右侧“发送”按钮占 10%，二者水平并排显示于同一行。然而，即使设置了 display: flex，按钮仍意外换行——这并非 Flex 布局失效，而是 CSS 盒模型（Box Model）的默认行为所致。
? 根本原因：标准盒模型的宽度计算方式
根据 CSS 标准盒模型，width 属性仅作用于内容区（content box）。若元素设置了 border 或 padding（哪怕只是浏览器默认样式或开发者无意添加），这些尺寸会被额外叠加到 width 上。例如：
.chatInput {
width: 90%;
border: 1px solid #ccc; /* 实际占用宽度 = 90% + 2px */
}
.chatSendBtn {
width: 10%;
border: 1px solid #ccc; /* 实际占用宽度 = 10% + 2px */
}此时两元素总宽度 ≈ 100% + 4px，超出父容器 100%，Flex 容器为避免溢出，自动触发换行（尤其在 flex-wrap: wrap 下）。
✅ 正确解法：统一使用 box-sizing: border-box
将 box-sizing: border-box 应用于所有参与布局的子元素，使 width 包含 content、padding 和 border，确保百分比宽度严格按预期分配：
.chatFooter {
width: 100%;
display: flex;
/* 注意：此处建议改为 flex-wrap: nowrap 防止意外换行 */
flex-wrap: nowrap; /* 关键：禁用换行 */
justify-content: space-between;
}
.chatInput,
.chatSendBtn {
/* 统一启用 border-box —— 兼容写法 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.chatInput {
width: 90%;
height: 40px; /* 建议显式设高度，避免 textarea 默认拉伸 */
padding: 8px;
border: 1px solid #ddd;
font-size: 1em;
resize: none;
outline: none;
}
.chatSendBtn {
width: 10%;
height: 40px;
padding: 0;
border: 1px solid #ddd;
background-color: white;
color: black;
cursor: pointer;
font-size: 1.3em;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}? 重要提示：
- 父容器
.chatFooter中flex-flow: row wrap应改为flex-wrap: nowrap，否则即使子元素尺寸正确，Flex 仍可能因其他因素（如最小尺寸限制）强制换行；<textarea></textarea>默认具有min-width: min-content行为，建议配合width: 90%显式设置height并禁用resize，避免高度异常影响布局；- 若需响应式适配，可结合
flex-basis与flex-grow进阶控制（如flex: 0 0 90%），但对基础场景，width+border-box已足够可靠。
✅ 最终 HTML 结构（保持语义清晰）
<div class="chatFooter"> <textarea class="chatInput" placeholder="Enter message"></textarea> <button type="button" class="chatSendBtn">Send</button> </div>
⚠️ 额外建议：将
<div class="chatSendBtn"> 替换为 <code><button></button>标签，不仅提升可访问性（支持键盘聚焦与回车触发），也避免<div> 在无 <code>role="button"时缺乏语义。通过统一应用
box-sizing: border-box并修正 Flex 换行策略，即可稳定实现 90%/10% 的精准水平布局，彻底告别意外换行问题。
