Исправлено боковое меню чата с использованием flex box

Question

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

Он находится внутри тела HTML, который имеет 100% высоты.Вот код

.main-container-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.message-box-container {
  border: 1px solid red;
  overflow: scroll;
}

.message-box {
  text-align: left;
  padding-left: 5px;
  font-size: 13px;
}

.chat-container {
  height: 100%;
  width: 270px;
  display: flex;
  flex-direction: column;
  position: fixed;
  background-color: yellow;
  text-align: center;
  margin-left: 10px;
}

.chat-sub-container {
  flex: 1;
}

<div _ngcontent-c0="" class="chat-container">
  <div _ngcontent-c0="" class="chat-sub-container">
    <app-chat _ngcontent-c0="" _nghost-c1="">
      <div _ngcontent-c1="" class="main-container-chat">
        <div _ngcontent-c1="" class="message-box-container" id="message-box-container">
        </div>
        <div _ngcontent-c1="" class="chat-input"><input _ngcontent-c1="" class="ng-untouched ng-pristine ng-valid">
          <button _ngcontent-c1="">Send</button>
        </div>
        <div _ngcontent-c1="" class="chat-detail">
          <p _ngcontent-c1="">User count: 1</p>
        </div>
      </div>
    </app-chat>
  </div>
</div>

Я знаю, как CSS и HTML могут немного запутаться.Но я надеюсь, что это читабельно.

Примечания: - Используя положение: исправлено, я могу оставить компонент чата фиксированным с левой стороны.При прокрутке вниз панель чата остается в правильном положении.- Основная проблема заключается в том, что при установке message-box-container кнопка отправки и число пользователей div исчезают.Я просто хочу, чтобы вся панель чата оставалась на высоте 100% независимо от высоты браузера.

Я просто хочу, чтобы вся панель чата оставалась на высоте 100% независимо от высоты браузера.

Это то, что у меня сейчас есть ...

текущий стиль чата

и это то, чего я хочу достичь.

желаемый стиль чата

Обратите внимание, что во втором изображении область для кнопок ввода и отправки находится внизу.В идеале, когда пользователь уменьшает высоту браузера, он должен оставаться прежним.Единственное, что меняется - это окно для сообщений чата.

Я пытаюсь подражать тому, что Twitch делает со своим чатом.Я использую Flex Containers.

РЕДАКТИРОВАТЬ:

Если я добавлю в сообщение-контейнер-flex: 1 или flex-grow: 1: это происходит с моим чатом:

flex1

РЕДАКТИРОВАТЬ :::: На всякий случай, вот лучший полный охват всего сайта.Опять же это угловой.Окно чата - это его собственный компонент.

fullscreenofexample

EDIT --------------------------------------------------------------------------------------------------------------------------

Если вы посмотрите последнюю фотографию в моем вопросе.Вы заметите, что над окном чата есть дополнительный контент.Изменение .chat-container на 82% решило проблему, когда добавление Flex: 1 к message-box-container привело к исчезновению поля ввода.Изменение процентного соотношения высоты исправило это.

Но теперь проблема в том, что окно чата динамически расширяется, но не сжимается при сворачивании экрана

Answer 1

Мне пришлось изменить ваш макет, но это то, что вы ищете?http://jsfiddle.net/9mn1aueL/2/

.main-container-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.message-box-container {
  border: 1px solid red;
  /* overflow: scroll; */
  flex: 1 0 auto;
}

.message-box {
  text-align: left;
  padding-left: 5px;
  font-size: 13px;
}

.chat-container {
  height: 100%;
  width: 270px;
  position: fixed;
  background-color: yellow;
  text-align: center;
  margin-left: 10px;
}

<div class="chat-container">
  <app-chat>
    <div class="main-container-chat">
      <div class="message-box-container" id="message-box-container">
      </div>
      <div class="chat-input">
        <input class="ng-untouched ng-pristine ng-valid">
        <button>Send</button>
      </div>
      <div class="chat-detail">
        <p>User count: 1</p>
      </div>
    </div>
  </app-chat>
</div>

Answer 2

Вам просто нужно установить flex-grow: 1 на .message-box-container, что позволит ему расширяться, чтобы заполнить доступное пространство.Также обратите внимание, что вы, вероятно, также захотите удалить overflow: scroll, чтобы лучше соответствовать вашему дизайну.

.main-container-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.message-box-container {
  border: 1px solid red;
  /* overflow: scroll; */
  flex-grow: 1;
}

.message-box {
  text-align: left;
  padding-left: 5px;
  font-size: 13px;
}

.chat-container {
  height: 100%;
  width: 270px;
  display: flex;
  flex-direction: column;
  position: fixed;
  background-color: yellow;
  text-align: center;
  margin-left: 10px;
}

.chat-sub-container {
  flex: 1;
}

<div _ngcontent-c0="" class="chat-container">
  <div _ngcontent-c0="" class="chat-sub-container">
    <app-chat _ngcontent-c0="" _nghost-c1="">
      <div _ngcontent-c1="" class="main-container-chat">
        <div _ngcontent-c1="" class="message-box-container" id="message-box-container">
        </div>
        <div _ngcontent-c1="" class="chat-input"><input _ngcontent-c1="" class="ng-untouched ng-pristine ng-valid">
          <button _ngcontent-c1="">Send</button>
        </div>
        <div _ngcontent-c1="" class="chat-detail">
          <p _ngcontent-c1="">User count: 1</p>
        </div>
      </div>
    </app-chat>
  </div>
</div>