flexbox не будет переполнен justify-content: flex-end

Question

Я создаю чат с помощью css flexbox, и, поскольку я хочу, чтобы мои сообщения отображались в нижней части контейнера, я использовал justify-content: flex-end, но когда у меня много сообщений, div не прокручивается с помощью overflow: auto

Я читал о решении, которое должно поменять местами мой .messages div и мой .write-zone div и заменить flex-direction: column-reverse, но это не очень хорошее решение для меня, потому что содержание моего .messages div динамический, сообщения будут добавлены, а уровень прокрутки не будет следовать, и я хотел бы избежать прокрутки в javascript.

Кто-нибудь знает какое-либо решение или хитрость для этого?

Вот скрипка, показывающая скелет моего кода:

.container {
  width: 60%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.messages {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: auto;
}

.message {
  margin: 5px;
  height: 80px;
  display: flex;
  flex-direction: row;
}

.message.user {
  justify-content: flex-end;
  background-color: #2bf;
}

.message.other {
  justify-content: flex-start;
  background-color: #bbb;
}

.write-zone {
  width: 100%;
  height: 7%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

input {
  width: 80%;
}

<div class="container">
  <div class="messages">
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div><div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
  </div>
  <div class="write-zone">
    <input type="text" />
    <button>
    send
    </button>
  </div>
</div>

Answer 1

Если я правильно понимаю, вы пытаетесь выравнивать сообщения снизу и перемещаться вверх, если появляются новые.

Использование justify-content: flex-end на контейнере является правильным, но если .messages - этоберя всю доступную высоту, которая все еще не имеет никакого эффекта.

Из .messages, удалите height: 100% и замените его justify-content: flex-end (который кажется ненужным) на margin-top: auto, и я думаю, что вы будетешаг вперед.

.messages {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    overflow-y: auto;
}

Таким образом, «хитрость», которую вы ищете, - это автоматическое поле: https://www.w3.org/TR/css-flexbox-1/#auto-margins.

Answer 2

Похоже, вы пытаетесь сделать чат-прокрутку прокручиваемой при большом количестве сообщений.

Я обнаружил, что, удалив flex-end justify-content из .messages, я могу прокрутитьсообщения.

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

.container {
  width: 60%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.messages-container {
  height: 100%;
  max-height: 300px;
  overflow: auto;
}

.messages{
  display: flex;
  flex-direction: column;
  /*   justify-content: flex-end; */
  overflow: auto;
}

.message {
  margin: 5px;
  height: 80px;
  display: flex;
  flex-direction: row;
}

.message.user {
  justify-content: flex-end;
  background-color: #2bf;
}

.message.other {
  justify-content: flex-start;
  background-color: #bbb;
}

.write-zone {
  width: 100%;
  height: 7%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

input {
  width: 80%;
}

<div class="container">
  <div class="messages">
  <div class="messages-container">
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div><div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    </div>
  </div>
  <div class="write-zone">
    <input type="text" />
    <button>
    send
    </button>
  </div>
</div>

Answer 3

Вы были почти там!

Две вещи, которые вы можете сделать, чтобы приблизить вас:

1. Чтобы предотвратить сгибание гибких элементов (разделяя себя между пространством контейнера)он помещен в), чтобы установить явную минимальную высоту вместо просто высоты
2. Создайте контейнерный div, который обернет ваши сообщения: .messages-container и задайте для него явную максимальную высоту и переполнение auto.

HTML:

<div class="messages">
    <div class="messages-container"> <!-- New Wrapping Container -->
       <div class="message user">

CSS:

    .message {
      min-height: 80px;
    }

   .messages-container {
      height: 100%;
      max-height: 300px;
      overflow: auto;
    }
   .messages{
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
      overflow: auto;
    }

Рабочий пример:

.container {
  width: 60%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.messages-container {
  height: 100%;
  max-height: 300px;
  overflow: auto;
}

.messages{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: auto;
}

.message {
  margin: 5px;
  min-height: 80px;
  display: flex;
  flex-direction: row;
}

.message.user {
  justify-content: flex-end;
  background-color: #2bf;
}

.message.other {
  justify-content: flex-start;
  background-color: #bbb;
}

.write-zone {
  width: 100%;
  height: 7%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

input {
  width: 80%;
}

<div class="container">
  <div class="messages">
  <div class="messages-container">
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div><div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    </div>
  </div>
  <div class="write-zone">
    <input type="text" />
    <button>
    send
    </button>
  </div>
</div>