基本CSS +网格：如何防止一个动态网格单元炸毁我的整个网格容器？ [重复]

Question

我知道这是一个常见问题，但我还没有看到有人在不放弃网格或硬编码像素大小的情况下回答这个问题（这似乎是不好的做法），所以想看看是否可能：

我正在尝试创建一个包含两个单元格的简单网格。我希望顶部单元格的大小动态调整到父网格容器的左侧。我希望底部单元格保持固定在父网格容器的底部。

顶部容器将包含要在聊天应用程序中阅读的所有消息。 底部容器将包含一个撰写栏，用于编写和发送消息。

为了感觉自然，顶部容器（消息列表）应该在溢出时滚动。 底部容器（撰写栏）应保持固定在屏幕底部。

我的代码的问题是，当列表长到足以溢出容器时，顶部容器总是扩展到堆叠消息的完整长度。 （我将一组消息映射到

chat-message-list

内的 div）。它是如此激进，它不仅将底部单元格推到折叠下方，还将网格外的元素推到下方。

HTML：

  <div id="chat">
    <div id="chat-read">
      <div id="chat-message-list">
        ... /* Variable amount of divs containing a chat message each */
      </div>
    </div>
    <div id="chat-compose">
      ... /* Fixed-height compose bar */
    </div>
  </div>

CSS：

#chat {
  display: grid;
  grid-template: 1fr 64px / 100%;
  height: 100%; /* This does nothing */
}

#chat-read {
  grid-area: 1 / 1 / span 1 / span 1;
  overflow: scroll;
  margin-bottom: 0px;
}

#chat-compose {
  grid-area: 2 / 1 / span 1 / span 1;
}

#chat-message-list {
  display: flex;
}

提前致谢！

Answer 1

使用以下代码：

*{margin: 0;padding: 0;box-sizing: border-box;}
p{margin-bottom: 10px;}
#chat {
  display: grid;
  grid-template: 1fr 100px / 100%;
  height: 100%; /* This does nothing */
}

#chat-read {
  grid-area: 1 / 1 / span 1 / span 1;
  overflow-y: scroll;
  margin-bottom: 0px;
  padding: 20px;
  background-color: azure;
}

#chat-compose {
  grid-area: 2 / 1 / span 1 / span 1;
  overflow-y: scroll;
  background-color: antiquewhite;
  padding: 20px;
}

#chat-message-list {
  display: flex;
  flex-direction: column;
}

<div id="chat">
        <div id="chat-read">
          <div id="chat-message-list">
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
          </div>
        </div>
        <div id="chat-compose">
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
            <p>Hi</p>
            <p>Hello,</p>
        </div>
      </div>