Firefox 中的 Flexbox 溢出-y 滚动

Question

对于聊天应用程序，我想要一个可滚动的消息列表。它适用于 Chrome / Chromium，但不适用于 Firefox。这个问题似乎与flexbug #1 相关，并且在 SO 上经常被询问和解决。然而，尽管按照here 和其他地方的建议对所有父母尝试了min-height:0，但问题仍然存在。

一个快速的解决方法是从.bot-message-list 中删除display:flex。但是这样做会导致消息开始出现在列表的顶部，而不是预期的底部。

所以问题是：我可以进行哪些更改才能使消息列表在所有浏览器上都可滚动，同时初始消息开始填充在列表底部。

Codepen of the current state

任何指针都非常感谢！

Answer 1

您可以尝试在元素“.message-list-inner”上添加高度。

.message-list-inner {
     height: 100vh; /* or height: 100%;*/
}

简单看一下，它似乎有效。