Вложенное содержимое сетки для использования доступного пространства ИЛИ прокрутка - PullRequest
Новая
       15

Вложенное содержимое сетки для использования доступного пространства ИЛИ прокрутка

0 голосов
/ 30 января 2019

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

У меня естьпробовал довольно много комбинаций позиционирования и overflow-y: scroll и т. д., но, похоже, ничего не дает желаемого результата.Кто-нибудь может направить меня в правильном направлении. 

.container {
  height: calc(100vh - 100px);
  width: 500px;
}

.chat {
  display: grid;
  height: 100%;
  grid-template-rows: 40px auto;
}

.header { /* first row */
  height: 40px;
  background: Gray;
}

.conversation-wrapper { /* second row */
  display: grid;
  grid-template-rows: auto 40px 40px;
}

.conversation { /* first nested row */
  background: Silver;
  margin-bottom: -40px; /* visible behind toolbar */
  overflow-y: scroll;
}

.toolbar { /* second nested row*/
  background: CadetBlue;
  opacity: 0.5;
}

.input { /* third nested row */
  background: Gray;
}
<div class="container">
  <div class="chat">
    <div class="header">
      Headers
    </div>
    <div class="conversation-wrapper">
      <div class="conversation">
        Conversation<br>Conversation<br>Conversation<br>Conversation<br>Conversation<br>Conversation<br>
        Conversation<br>Conversation<br>Conversation<br>Conversation<br>Conversation<br>Conversation<br>
        Conversation<br>Conversation<br>Conversation<br>Conversation<br>Conversation<br>Conversation<br>
        I want this part to scroll "behind" composer when window is resized
      </div>
      <div class="toolbar">
        Toolbar
      </div>
      <div class="input">
        Composer
      </div>
    </div>
  </div>
</div>

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

РЕДАКТИРОВАТЬ: может быть проще увидеть проблему здесь: https://codepen.io/marthee/pen/jdVLpv

...