Html 使用 CSS flexbox 和溢出顶部而不是底部

发布于01月25日

我正在用css Flexbox制作一个"Chatbox"，但我一直在try 让项目正确溢出.

我希望聊天始终是有序的，最新的项目在底部，就像正常的聊天.

最终用户能够 Select 他们希望聊天与容器顶部对齐还是与底部对齐.

当我将其设置为底部并可以使用JUSTIFY-CONTENT:Flex-End属性时，它会完美地在顶部溢出.

以下是我试图让它发挥作用的方法:

当第一个聊天进入时，它与容器的顶部对齐.
当第二个聊天进入时，它位于第一个聊天之下.
最终会有足够的消息使其溢出其容器.但是，由于我使用了JUSTIFY-CONTENT:Flex-Start属性来对齐顶部，所以条目在底部溢出，而我希望将条目推出顶部.

我怎么才能让信息向上移动呢？

<div id="main-container">
  <div id="messages">
    <div class="message-row">Message 1</div>
    <div class="message-row">Message 2</div>
    <div class="message-row">Message 3</div>
  </div>
</div>

和我的css(我的css比这个复杂得多，所以我go 掉了我认为对这个问题不必要的东西，但如果你需要看其他东西，请告诉我)

#messages {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 95%;
  box-sizing: border-box;
  overflow: hidden;
}

var count = 0; window.onload = () => { document.getElementById('clear').addEventListener('click', (e) => { document.querySelector(".message-block").innerHTML = ""; count = 0; }); setInterval(appendChild, 1000); }; function appendChild() { let msg = document.createElement("div"); msg.className = "message"; msg.innerText = "Message " + count++; document.querySelector(".message-block").appendChild(msg); }

.container { height: 160px; overflow: hidden; display: flex; align-items: flex-end; border: 1px solid gray; } .message-block { width: 100%; min-height: 100%; } .message { border-radius: 0.5rem; background-color: lightgray; margin: 0.25rem; padding: 0.25rem 0.5rem; }

Html 使用 CSS flexbox 和溢出顶部而不是底部

推荐答案

Html相关问答推荐

传单自定义标记(divIcon)html/css不适用

只有一行上有溢出的CSS网格

如何在css中将包含多行文本的多个p-tag放在一起(并排)？

将网格包装在css中

如何在一张表中逃脱边境坍塌--崩溃？

在将DevExtreme升级到版本23.2之后，到处都会生成一个Pesudo类，我在其中使用了<；DXi-Item Title=&Quot；&Quot；>；

当光标悬停在(相同)父元素上方时，为多个子元素创建不同的过渡动画

Django中的图像未从静态显示

使用bash从html表格中提取表格

如何防止弹性项目溢出容器？

是否有语义 HTML 可以澄清含义？

：after 伪元素没有出现，即使它有 content 属性

我真的需要一个容器来让行和列正常工作吗？ ( bootstrap 程序 v5)

Google Apps 脚本 - RegEx 适用于小文本，但不适用于大文件？

网页爬虫：使用时光机器进行数据采集

使用HTML和CSS构建简历网站.无法使body元素内的div元素跨越整个网站高度

HTML 如何根据屏幕尺寸调整/裁剪视频背景？

XPATH Select h2标签和
标签之间或h2标签和标签之间的td元素，以立即为准

标签之间或h2标签和标签之间的td元素，以立即为准

两个span，一个在div居中，好像没有另一个，另一个在右边

高度大于页面高度和页面大于覆盖的 CSS 覆盖