html - 聊天网络应用 : flex-boxes inside div position:fixed

Question

我有一个聊天网络应用程序，其底部栏包括:按钮、文本输入、按钮:

<div id="bottom-bar">
  <div class="button-left">
    <img src="https://placeholdit.co//i/40x40">
  </div>
  <div class="textentry">
    <input type="text" id="chatmsg" name="chatmsg">
  </div>
  <div class="button-right">
    <img src="https://placeholdit.co//i/40x40">
  </div>
</div>

#bottom-bar {
    position: fixed;
    bottom: 0px;
    height: 40px;
    width: 100%;
}

我想要实现的目标:(1) 将左按钮放在底部栏的左侧，(2) 将右侧按钮放在底部栏的右侧，(3) 有一个可拉伸(stretch)的输入字段在中间使用所有可用空间。

我试过:

#bottom-bar {
   ...the css above and additionally ...
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content:space-between;
   align-items: center;
}

#chatmsg{
  width: auto;
}

但这让我无处可去。非常感谢任何帮助。

Answer 1

textentry 必须增长并占据所有剩余位置:

#bottom-bar {
    position: fixed;
    bottom: 0px;
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
    align-items: center;
}
.button-left,
.button-right {
  width: 40px;
}
.textentry{
  flex-grow: 1;
}
#chatmsg {
  width: 100%;
}

检查这个:https://jsfiddle.net/43Lqzznt/3/