本文详解如何通过合理使用 flex 属性替代混合 width 百分比与 flex 的错误写法，解决嵌套 input 和 button 在 flex 容器中重叠、溢出及尺寸失准的问题。
本文详解如何通过合理使用 `flex` 属性替代混合 `width` 百分比与 `flex` 的错误写法，解决嵌套 input 和 button 在 flex 容器中重叠、溢出及尺寸失准的问题。
在 Flex 布局中，同时设置 flex 属性和显式 width（如 width: 90%）极易引发冲突——因为 flex 会主动参与剩余空间分配，而 width 又试图强制固定尺寸，导致浏览器计算逻辑混乱，最终表现为元素重叠、容器出现意外滚动条、子元素实际宽度偏离预期。
你原代码中的关键问题在于：
.chatInput {
flex: 1; /* → 浏览器按 flex-grow=1 分配「所有剩余空间」*/
width: 90%; /* × 冲突：width 在 flex 容器中仅作为初始主轴尺寸参考，不具最终约束力 */
}
.chatSendBtn {
flex: 0; /* → 不伸缩，但未设基础尺寸，易被压缩或撑开 */
width: 10%; /* × 同样失效，且与 flex: 0 协同时行为不可控 */
}
✅ 正确做法是：完全交由 flex 控制比例分配，移除冗余 width 声明。flex: a 等价于 flex: a 1 0%（即 flex-grow: a, flex-shrink: 1, flex-basis: 0%），此时元素将严格按 a : b 的比例瓜分父容器主轴可用空间。
因此，要实现 90% : 10% 的布局，推荐如下简洁写法：
.chatFooter {
display: flex;
width: 100%;
height: 48px; /* 建议显式设高，避免高度塌陷 */
}
.chatInput {
flex: 9; /* 占据 9/10 = 90% 的空间 */
height: 100%;
font-size: 1em;
}
.chatSendBtn {
flex: 1; /* 占据 1/10 = 10% 的空间 */
height: 100%;
font-size: 1.3em;
color: black;
cursor: pointer;
}
同时，请确保子级 <input> 和 <button></button> 完全填满其父容器：
<div class="chatInput">
<input type="text" placeholder="Enter message" value="msg" style="width: 100%; height: 100%; border: none; padding: 0 12px;">
</div>
<div class="chatSendBtn">
<button style="width: 100%; height: 100%; border: none; background: none; padding: 0;">
Send
</button>
</div>
⚠️ 注意事项：
- 移除
.chatInput和.chatSendBtn上所有width声明（包括内联样式），否则会干扰 flex 计算； - 若仍出现滚动条，请检查父容器是否设置了
overflow: auto/scroll，或是否存在未重置的默认margin/padding（尤其<input>和<button></button>默认有边框和内边距）； - 推荐为
<input>和<button></button>添加border: none和box-sizing: border-box，避免因边框导致实际尺寸超限； - 在
.chatFooter上添加height（如48px）可防止其高度由内容撑开，提升布局稳定性。
总结：Flex 布局的核心是「用 flex 控制比例，用 flex-basis 控制基准，避免与 width 混用」。坚持这一原则，即可彻底规避重叠、溢出与尺寸漂移问题。
