两个弹性行容器的项目设置为宽度 90% 和 10%，但正在换行

Question

我希望输入框和发送按钮框在 Flex 行中彼此并排，输入占据 90% 的宽度。但是，发送按钮位于输入下方，我不确定为什么。

.chatFooter { /* footer */
  width: 100%;

  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  border: 1px solid red;
}
.chatInput {
  border: 1px solid black;
  height: 100%;
  width: 90%;
  outline: none;
  resize: none;
  font-size: 1em;
  font-family: inherit;
  background-color: white;
}
.chatSendBtn {
  border: 1px solid black;
  height: 100%;
  width: 10%;
  font-size: 1.3em;
  background-color: white;
  color: black;
  cursor: pointer;
}
.chatSendBtn:hover {
  color: red;
}

<div class="chatFooter">
  <textarea
     class="chatInput"
     placeholder="Enter message"
  ></textarea>

  <div class="chatSendBtn">
    Send
  </div>
</div>

Answer 1

这是因为默认情况下边框位于“元素外部”，添加

inset

将解决您的问题：

border: inset 1px solid black;

在以下位置进行：

.chatInput

和

.chatSendBtn