chat web app: flex-boxes inside div position:fixed - html

Question

I have a chat web app with a bottom bar consisting of: button, text entry, button:
<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%;
}
What I want to achieve: (1) place the left button to the left of the bottom-bar, (2) place the right button to the right of the bottom-bar and (3) have an input field that stretches in the middle using all the space that is available.
I tried:
#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;
}
But this got me nowhere. Any help is much appreciated.

Answer 1

the textentry has to grow and take all the place left:
#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%;
}
check this: https://jsfiddle.net/43Lqzznt/3/

Answer 2

Use calc(100% - 80px); as the width for .textentry (i.e. full width minus the width of the two images) and make the input 100% wide inside of that. If you do just that, the input overflows its container to the right, so use padding on .textentry to compensate that and adjust the distance between the elements as desired, as shown in my snippet.
html,
body {
margin: 0;
}
#bottom-bar {
position: fixed;
bottom: 0px;
height: 40px;
width: 100%;
}
#bottom-bar {
display: flex;
justify-content: space-between;
align-items: center;
}
.textentry {
width: calc(100% - 80px);
padding: 0 10px 0 2px;
}
input#chatmsg {
width: 100%;
}
<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>

Answer 3

Using display:flex on the container and by adjusting the input div's flex:1 or setting it's width to 100% should do it. Check output in the console.
FLEX
The input box will stretch between the images as the container div shrinks or expands in size.
#bottom-bar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content:space-between;
align-items: center;
}
#chatmsg{
width: 100%;
}
.textentry {
/* width: 100% */
flex: 1;
}
<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>