Question

我在一个响应容器内有一个嵌套的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

嵌套网格内容以使用可用空间或滚动

0 个答案: