Почему пространство между flexbox justify-content не работает?

Question

У меня есть раздел комментариев, где пользователь может вводить комментарии, он автоматически отображает комментарии и время ввода комментария.

Я хочу, чтобы имя автора было слева, а дата - справа, и оно должно быть гибким, используя flex-box

Вот jsfiddle: https://jsfiddle.net/68vt3c7s/

Вот что я хотел бы иметь

Вот фрагмент того, что у меня есть:

.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>

что мне нужно изменить, чтобы получить то, что я хочу?

Answer 1

Добавить flex: auto; к .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>

Answer 2

Вам нужно установить ширину .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 3

Надеюсь, это поможет.

.comments_wrapper{
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
}

Answer 4

comments_wrapper селектор не занимает место, поэтому вы не видите эффекта. Попробуйте следующим образом:

.comments_wrapper {
    padding: 32px 21px;
    flex-grow: 1; /* Key Line */
}

Answer 5

Добавьте для .comments_wrapper flex: auto;, чтобы выровнять время вправо

Средства:

.comments_wrapper {
    padding: 32px 21px;
    flex: auto; /* here I added */
}