当在 Flex 容器中为子元素设置 width: 90% 和 width: 10% 时，若未启用 box-sizing: border-box，边框与内边距会额外增加元素总尺寸，导致超出容器宽度而强制换行。本文详解原理并提供可靠解决方案。
当在 flex 容器中为子元素设置 `width: 90%` 和 `width: 10%` 时，若未启用 `box-sizing: border-box`，边框与内边距会额外增加元素总尺寸，导致超出容器宽度而强制换行。本文详解原理并提供可靠解决方案。
在使用 Flex 布局实现「输入框 + 按钮」并排布局时，一个常见却易被忽视的问题是：即使子元素宽度之和为 100%（如 90% + 10%），按钮仍会换行到下一行。根本原因在于 CSS 默认盒模型（content-box）的行为。
根据标准 CSS 盒模型，width 属性仅作用于内容区（content area）。若元素设置了 border 或 padding，这些值会被额外叠加在 width 之上。例如：
.chatInput {
width: 90%;
border: 2px solid #ccc; /* 实际占用宽度 = 90% + 4px */
}
.chatSendBtn {
width: 10%;
border: 2px solid #ccc; /* 实际占用宽度 = 10% + 4px */
}此时两元素实际总宽度 > 100%，加上 Flex 容器默认的 flex-wrap: wrap（你代码中使用了 flex-flow: row wrap），浏览器便会触发换行。
✅ 正确解法：统一启用 box-sizing: border-box
该属性使 width 和 height 包含 content、padding 和 border，真正实现“所见即所得”的尺寸控制。
推荐写法（现代 CSS，无需前缀）：
/* 全局重置（强烈建议） */
*, *::before, *::after {
box-sizing: border-box;
}
.chatFooter {
width: 100%;
display: flex;
flex-flow: row nowrap; /* 关键：禁用换行，除非明确需要 */
justify-content: space-between;
align-items: stretch; /* 确保子元素等高 */
}
.chatInput {
width: 90%;
height: 100%;
padding: 12px 16px;
border: 1px solid #ddd;
outline: none;
resize: none;
font: inherit;
background-color: white;
}
.chatSendBtn {
width: 10%;
height: 100%;
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;
}
.chatSendBtn:hover {
color: #e53e3e;
}⚠️ 注意事项：
-
flex-flow: row wrap是换行的直接诱因；如需严格并排，请改为row nowrap（Flex 默认值）； - 即使无显式
border/padding，某些浏览器对<textarea></textarea>有默认border和resize样式，务必显式重置或依赖* { box-sizing: border-box }； -
<textarea></textarea>的height: 100%需确保父容器（.chatFooter）有明确高度，或改用flex: 1更健壮； - 若需响应式适配，可结合
min-width: 0防止textarea溢出（尤其在窄屏下）。
? 总结：Flex 中百分比宽度失效，90%+10% 仍换行，本质是盒模型理解偏差。box-sizing: border-box 是现代布局的基石级实践——它让尺寸计算可预测、可维护，并应作为项目初始化 CSS 的标配之一。
