根据我的理解，chatFooter 的宽度应该是其父级的 100%。 聊天输入应占其宽度的 90%，聊天发送按钮应占其宽度的 10%。 然后每个里面的输入和按钮应该分别占据整个chatInput和chatSendBtn div。 但我在容器上看到滚动条，并且按钮和输入的宽度不符合预期。
html {
height: 100vh;
width: 100vw;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
min-height: 0;
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid red;
}
.chatFooter { /* footer */
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
}
.chatInput {
flex: 1;
height: 100%;
width: 90%;
font-size: 1em;
}
.chatSendBtn {
flex: 0;
height: 100%;
width: 10%;
font-size: 1.3em;
color: black;
cursor: pointer;
}<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="chatFooter">
<div class="chatInput">
<input
type="text"
placeholder="Enter message"
value="msg"
style={{height: "100%", width: "100%"}}
/>
</div>
<div class="chatSendBtn">
<button
style={{height: "100%", width: "100%"}}
>
Send
</button>
</div>
</div>
</div>
</body>
</html>您的布局问题似乎源于对 Flex 属性和宽度百分比如何在 Flex 容器中协同工作的误解。当您在 .chatInput 上设置 flex: 1 并在 .chatSendBtn 上设置 flex: 0 时，您实际上是在告诉浏览器将所有可用空间分配给 .chatInput 而没有分配给 .chatSendBtn，这与您设置的百分比宽度不一致定义。
要实现 .chatInput 占用 90% 的空间而 .chatSendBtn 占用 10% 的所需布局，您不需要在这些元素上设置显式宽度。相反，使用 flex 属性来控制它们相对于彼此的大小。以下是调整 CSS 的方法：
.chatInput {
flex: 9; /* Takes up 90% of the space */
height: 100%;
font-size: 1em;
}
.chatSendBtn {
flex: 1; /* Takes up 10% of the space */
height: 100%;
font-size: 1.3em;
color: black;
cursor: pointer;
}
我建议你总是以
开始你的CSS代码* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
* {
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;
min-height: 0;
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid red;
}
.chatFooter { /* footer */
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
}
.chatInput {
flex: 1;
height: 100%;
width: 90%;
font-size: 1em;
}
.chatSendBtn {
flex: 0;
height: 100%;
width: 10%;
font-size: 1.3em;
color: black;
cursor: pointer;
}<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="chatFooter">
<div class="chatInput">
<input
type="text"
placeholder="Enter message"
value="msg"
style={{height: "100%", width: "100%"}}
/>
</div>
<div class="chatSendBtn">
<button
style={{height: "100%", width: "100%"}}
>
Send
</button>
</div>
</div>
</div>
</body>
</html>