Flex布局中嵌套输入框与按钮重叠、宽度不符合预期且出现滚动条的问题求助

我来帮你看看这个布局问题哈！你遇到的滚动条和宽度不符合预期的情况，主要是几个Flex布局的细节和盒模型的问题没处理好，咱们一步步来调整：

问题分析 #

1. 页面溢出导致滚动条：html和body默认带有margin，你设置的100%高度/宽度会加上默认margin，导致整体超出视口出现滚动条；同时没有全局设置box-sizing: border-box，元素的内边距、边框会额外撑大尺寸，进一步加剧溢出。
2. Flex属性与width冲突：在chatFooter这个Flex容器里，你给chatInput和chatSendBtn同时设置了width和flex属性，这两个属性在Flex布局中会互相干扰，导致宽度比例不符合预期。
3. 多余的布局属性干扰：chatFooter的justify-content: space-evenly会强制在子元素之间分配空白，破坏了你想要的90%/10%宽度比例。

解决方案及修改后的代码 #

先给全局设置统一的盒模型，再调整Flex布局的属性，具体修改如下：

修正后的CSS代码

/* 全局统一盒模型，避免内边距/边框撑大元素 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100vh;
  width: 100vw;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
  height: 100%;
  width: 100%;
  /* 清除默认margin，避免页面溢出 */
  margin: 0;
}
.container {
  height: 100%;
  width: 100%;
  
  display: flex;
  flex-direction: column;
  /* 移除多余的wrap，column方向不需要换行 */
  flex-wrap: nowrap;
  border: 1px solid red;
}

.chatFooter { /* footer */
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  /* 移除space-evenly，避免干扰宽度比例 */
}
.chatInput {
  /* 用flex属性控制比例，9份宽度 */
  flex: 9 1 90%;
  height: 100%;
  font-size: 1em;
}
.chatSendBtn {
  /* 用flex属性控制比例，1份宽度 */
  flex: 1 1 10%;
  height: 100%;
  font-size: 1.3em;
  color: black;
  cursor: pointer;
}

/* 给输入框和按钮单独设置盒模型，确保内部样式不溢出 */
.chatInput input,
.chatSendBtn button {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  /* 可以加一点内边距优化样式，不会撑大元素 */
  padding: 0 8px;
}

修正后的HTML代码（移除内联样式重复设置，统一用CSS控制）

<!DOCTYPE html>
<html>
  <body> 
  <div class="container">
    <div class="chatFooter">
      <div class="chatInput">
         <input
           type="text"
           placeholder="Enter message"
           value="msg"
         />
      </div>
        
      <div class="chatSendBtn">
        <button>
          Send
        </button>
      </div>
    </div>
  </div>
  </body>
</html>

关键修改点总结 #

• 全局设置box-sizing: border-box，让所有元素的内边距和边框都包含在宽高范围内，彻底解决溢出问题；
• 清除body的默认margin，避免页面整体超出视口；
• 用flex: 9 1 90%和flex: 1 1 10%代替单独的width属性，精准控制Flex子元素的宽度比例，避免属性冲突；
• 移除chatFooter中多余的justify-content: space-evenly，保证子元素按设定比例分配空间；
• 把输入框和按钮的内联样式移到CSS中，统一管理布局样式，避免重复代码。

这样修改后，chatFooter会占满父容器宽度，输入框和按钮会按9:1的比例分配空间，页面也不会出现多余的滚动条啦！

备注：内容来源于stack exchange，提问作者chung