当网格项与末端/底部对齐时，滚动不起作用

Question

我想使用 和 来创建聊天，但遇到了无法组合和CSS grid的问题。align-self: end;overflow-y: auto;

包含ul所有消息，并且应与底部对齐，这样即使只有一条消息，它也会显示在底部。

聊天的页眉和页脚是固定的，您只需滚动浏览消息（如 Whats App 和类似的应用程序）。

我用一些信息创建了这支笔。消息通过标题，它永远不允许我滚动。

html,
body {
  margin: 0;
  height: 100%;
}

#chat {
  display: grid;
  height: inherit;
  grid-template-rows: 50px auto 50px;
}

header,
footer {
  background: #4081ff;
}

ul {
  overflow-y: auto;
  align-self: end;
}

<section id="chat">
  <header>header</header>
  <ul>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>last message</li>
  </ul>
  <footer>footer</footer>
</section>

Answer 1

我的解决方案是滚动条。我添加了额外的 div。

https://codepen.io/anon/pen/zWaRJY

<section id="chat">
  <header>header</header>
  <div id="content">
  <ul>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>last message</li>
  </ul>
  </div>
  <footer>footer</footer>
</section>

html, body {
  margin: 0;
  height: 100%;
}

#chat {
  display: grid;
  height: inherit;
  grid-template-rows: 50px auto 50px;
}

header, footer {
  background: #4081ff;
}

#content {
  overflow-y: auto;
}

ul {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 100%;
  margin: 0;
}