Flexbox grow or shrink makes the div shift slightly - html

Question

I am using flexbox to design this navigation bar
Eveything is working fine except for two problems:
The second div grows and shrinks as required but when the content gets too large the second div shifts to the left slightly.
I can't understand how to place a 4th div just below div 2(which should also grow and shrink like div 2) while maintaining all four in the same line as this is my first time with flexbox implementation. Ex:
The 4th div should be in the position of black mark and both the text and black mark should be vertically centered.
html,
body {
background-image: url("../images/theme1.png");
background-repeat: repeat;
}
.conversationHeader {
background-color: rgba(255, 255, 255, 0);
border: none;
min-height: 60px;
display: block;
}
.headerOnScroll {
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 4px 6px -3px rgba(0, 0, 0, 0.2);
}
.horizontalLayout {
width: 100%;
margin: 0!important;
padding: 0 9px!important;
height: 68px;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.conversationBackButton {
font-size: 24px;
width: 40px;
height: 40px;
padding: 8px!important;
margin-right: 16px;
color: #1D333E!important;
display: inline-flex;
}
.conversationDetails {
background-color: #cccccc;
font-family: robotoregular, 'sans-serif'!important;
font-size: 18px!important;
color: #546770;
flex-wrap: nowrap;
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
.avatar {
min-width: 40px;
width: 40px;
height: 40px;
}
.composeMessageContainer {
background-color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<nav class="navbar navbar-fixed-top conversationHeader headerOnScroll">
<div class="container-fluid">
<div class="navbar-header horizontalLayout">
<a class="navbar-brand text-center conversationBackButton">
<span class="ionicons ion-android-arrow-back"></span>
</a>
<div class="conversationDetails">John Doe</div>
<img class="img-circle img-responsive avatar" src="images/dp.png">
</div>
</div>
</nav>
<div class="container-fluid navbar-fixed-bottom composeMessageContainer">
Text
</div>

Answer 1

If you add flex-shrink: 0 to the .conversationBackButton and .avatar it should work fine, as it will prevent them to shrink
.conversationBackButton {
font-size: 24px;
width: 40px;
height: 40px;
padding: 8px!important;
margin-right: 16px;
color: #1D333E!important;
display: inline-flex;
flex-shrink: 0; /* added */
}
.avatar {
min-width: 40px;
width: 40px;
height: 40px;
flex-shrink: 0; /* added */
}
To make the 4th div line up with the 2nd, move its markup the navbar-header horizontalLayout, remove navbar-fixed-bottom and change its CSS rule to this
.composeMessageContainer {
flex-basis: calc(100% - 56px - 40px);
margin-left: 56px;
background-color: red;
}
Update after a question edit
To make the 4th div line up with the 2nd, move its markup the conversationDetails, put the existing text in conversationDetails in its own div and remove navbar-fixed-bottom
.composeMessageContainer {
background-color: red;
}
Stack snipper
html,
body {
background-image: url("../images/theme1.png");
background-repeat: repeat;
}
body {
padding-top: 80px;
}
.conversationHeader {
background-color: rgba(255, 255, 255, 0);
border: none;
min-height: 60px;
display: block;
}
.headerOnScroll {
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 4px 6px -3px rgba(0, 0, 0, 0.2);
}
.horizontalLayout {
width: 100%;
margin: 0!important;
padding: 0 9px!important;
height: 68px;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
}
.conversationBackButton {
font-size: 24px;
width: 40px;
height: 40px;
padding: 8px!important;
margin-right: 16px;
color: #1D333E!important;
display: inline-flex;
flex-shrink: 0; /* added */
}
.conversationDetails {
background-color: #cccccc;
font-family: robotoregular, 'sans-serif'!important;
font-size: 18px!important;
color: #546770;
flex-wrap: nowrap;
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
.avatar {
min-width: 40px;
width: 40px;
height: 40px;
flex-shrink: 0; /* added */
}
.composeMessageContainer {
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<nav class="navbar navbar-fixed-top conversationHeader headerOnScroll">
<div class="container-fluid">
<div class="navbar-header horizontalLayout">
<a class="navbar-brand text-center conversationBackButton">
<span class="ionicons ion-android-arrow-back"></span>
</a>
<div class="conversationDetails">
<div>John Doe</div>
<div class="composeMessageContainer">
Text
</div>
</div>
<img class="img-circle img-responsive avatar" src="images/dp.png">
</div>
</div>
</nav>