Как можно «прокрутить» «средний» div и при этом реагировать так же, как «чат», как пользовательский интерфейс?

Question

Я пытаюсь создать простой пользовательский интерфейс чата на основе HTML / CSS, в котором есть три вертикальных элемента: Заголовок , Чаты и Панель отправки .

Если у меня есть три div с, как я могу получить средний div для полной "средней" высоты и при этом быть прокручиваемым для прокруткиСообщения?Я могу сделать это, если я установил в строке отправки div статическую высоту, но если я хочу, чтобы он расширялся, этот подход не работает.

Кто-нибудь знает, как использовать css для созданияотзывчивый пользовательский интерфейс, похожий на чат, такой, что средний контент можно прокручивать, а содержимое панели отправки можно расширять?

Не думаю, что это имеет значение, но это приложение React .

Вот пример кода проблем, с которыми я сталкиваюсь: (a) нижний элемент div не привязан к представлению, и (b) средний элемент div не прокручивается.

См. скрипка и фрагмент:

.wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
}

.top {
	height: 10px;
	background: yellow;
}

.bottom {
	background: gray;
}

.middle {
	background: red;
	width: 100%;
	height: 100%;
}

<div class="wrapper">
  <div class="top">

  </div>
  <div class="middle">
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    
  </div>
  <div class="bottom">
    <p>
    some content
    </p>
  </div>
</div>

Answer 1

Абсолют позиционирование для вашего wrapper здесь на самом деле не нужно.Кроме того, указание height: 100% для middle не * заполняет оставшееся пространство, оставленное top, а middle.

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

• добавьте flex: 1 в среднюю часть к заполните оставшееся пространство (Вы можете сослаться this answer, чтобы увидеть простую демонстрацию этого),

• добавьте overflow: auto в раздел middle - обратите внимание, что значение overflow отличается от видимого илисброс min-height на ноль заменит значение по умолчанию min-height: auto для flexbox столбца.- подробнее читайте здесь: Почему гибкие элементы не уменьшают размер содержимого? (см. некоторые примеры такого поведения здесь и здесь .)

• также добавьте flex: 0 0 auto к bottom элементу, чтобы в крайних случаях мы могли гарантировать, что он не будет расти или уменьшаться в любом случае.

См. Демо ниже:

body {
  margin: 0; /* reset default body margin */
}
.wrapper {
  height: 100vh; /* full viewport height */
  display: flex;
  flex-direction: column;
}

.top {
  background: yellow;
}

.bottom {
  background: gray;
  flex: 0 0 auto; /* don't grow or shrink in any case */
}

.middle {
  background: red;
  flex: 1; /* fill the remaining space */
  min-height: 0; /* optional */
  overflow: auto; /* overflow if exceeds available space */
}

<div class="wrapper">
  <div class="top">
    Header
  </div>
  <div class="middle">
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    
  </div>
  <div class="bottom">
    <p>
    some content
    </p>
  </div>
</div>

Answer 2

Вот один из способов использования flexbox:

#flexbox_container {
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 5px -2px #999;
  height: 90%;
}

.flex_item {
  background: #eee;
  margin: 4px;
  padding: 10px;
}

.middle {
  flex-grow: 1;
  overflow: auto;
}

html,
body {
  height: 100%;
}

<div id="flexbox_container">
  <div class="flex_item">
    Item</div>
  <div class="flex_item middle">
    <p>item</p>
    <p>item</p>
    <p>item</p>
    <p>item</p>
    <p>item</p>
    <p>item</p>
    <p>item</p>
    <p>item</p>
    <p>item</p>
    <p>item</p>
    <p>item</p>
    <p>item</p>
    <p>item</p>
  </div>
  <div class="flex_item">Item</div>
</div>

Answer 3

Вы, вероятно, хотите:

.wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
}

.top {
	height: 10px;
	background: yellow;
}

.bottom {
	background: gray;
}

.middle {
	background: red;
	width: 100%;
	height: 100%;
  overflow-y: auto;
}

<div class="wrapper">
  <div class="top">

  </div>
  <div class="middle">
    <p>
    some content
    </p>
        <p>
    some content
    </p>
        <p>
    some content
    </p>
        <p>
    some content
    </p>
        <p>
    some content
    </p>
        <p>
    some content
    </p>
        <p>
    some content
    </p>
            <p>
    some content
    </p>
  </div>
  <div class="bottom">
    <p>
    some content
    </p>
  </div>
</div>