Why is flexbox justify-content space-between not working? - html

Question

I have a comment section where the user can enter comments, it automatically displays comments and the time the comment was entered.
I want author name to be to the left and date to the right and it should be responsive using flex-box
Here is jsfiddle:
https://jsfiddle.net/68vt3c7s/
Here is what I would like to have
Here is a snippet of what i have:
.comments-description {
display: flex;
flex-direction: row;
padding: 23px 0px;
border-bottom: 2px solid #EBEBEB;
}
.comments_details {
display: flex;
align-items: center;
justify-content: space-between;
flex-basis: 100%;
margin-top: 27px;
}
.comments_wrapper {
padding: 32px 21px;
}
.comments-photo img {
border-radius: 300px;
width: 80px;
height: 80px;
position: relative;
top: 37px;
}
<div class="comments-description">
<div class="comments-photo"><img alt="" src="https://randomuser.me/api/portraits/men/84.jpg"></div>
<div class="comments_wrapper">
<div class="comments_details">
<h1>Mike Ross</h1>
<span class="days">4 minutes ago</span>
</div>
<div class="comments_text">
<p>dingi
</p>
</div>
</div>
</div>
what do I need to change to get what I want ?

Answer 1

Add for .comments_wrapper the flex: auto; in order to align time to right
Means:
.comments_wrapper {
padding: 32px 21px;
flex: auto; /* here I added */
}

Answer 2

Hope this will help.
.comments_wrapper{
-webkit-box-flex:1;
-ms-flex-positive:1;
flex-grow:1;
}

Answer 3

comments_wrapper selector not taking rest of the place that's why you not seeing the effect. Try like following way:
.comments_wrapper {
padding: 32px 21px;
flex-grow: 1; /* Key Line */
}

Answer 4

You need to set the width of the .comments_wrapper
.comments-description {
display: flex;
flex-direction: row;
padding: 23px 0px;
border-bottom: 2px solid #EBEBEB;
}
.comments_details {
display: flex;
align-items: center;
justify-content: space-between;
flex-basis: 100%;
margin-top: 27px;
}
.comments_wrapper {
padding: 32px 21px;
width: 100%; /*add this*/
}
.comments-photo img {
border-radius: 300px;
width: 80px;
height: 80px;
position: relative;
top: 37px;
}
.days{
margin-left: auto;
}

Answer 5

Add flex: auto; to .comments_wrapper css
.comments_wrapper {
padding: 32px 21px;
flex: auto;
}
.comments-description {
display: flex;
flex-direction: row;
padding: 23px 0px;
border-bottom: 2px solid #EBEBEB;
}
.comments_details {
display: flex;
align-items: center;
justify-content: space-between;
flex-basis: 100%;
margin-top: 27px;
}
.comments_wrapper {
padding: 32px 21px;
flex: auto;
}
.comments-photo img {
border-radius: 300px;
width: 80px;
height: 80px;
position: relative;
top: 37px;
}
<div class="comments-description">
<div class="comments-photo"><img alt="" src="https://randomuser.me/api/portraits/men/84.jpg"></div>
<div class="comments_wrapper">
<div class="comments_details">
<h1>Mike Ross</h1>
<span class="days">4 minutes ago</span>
</div>
<div class="comments_text">
<p>dingi
</p>
</div>
</div>
</div>