第一个回答
题目:
Div that expands only upwards and scrolls at max height题目如下：
So I’m writing a frontend with react and I have a chat window that looks like so
<div id="element-below">
<!-- other stuff -->
</div>
inside of the chat-window div I am using react to render messages from an observable array of messages, each message inside of chat-window looks like this:
{messageStr}
I calculate the height of the chat-window-wrapper div based on the amount of messages in react and it works great, and I have a max height that the outer div can expand to that works great. I'm working on getting the inside of chat-window-wrapper to look right
I need the chat-window-textarea to remain anchored to the bottom, currently it sits kind of in the middle of the messages with a lot of empty space below it
I need chat-window-wrapper to only expand upwards, currently if I hit the max height the window starts to expand downwards and the element-below gets pushed off the screen. I want chat-window to scroll if chat-window-wrapper reaches max height
I’m collaborating on a larger project, so I’m currently treating outer-wrapper and element-below as a black box, but I can change the css on those elements if absolutely necessary
How would I go about doing this with css? I have tried a bunch of stuff, and I can post my janky css files if needed, but I think I’m going to have to start from scratch anyway. Any guidance is appreciated even if it’s just a small suggestion
Thanks
题主大概是要实现一个聊天APP界面，消息从底部向上显示，底部有一个操作区域。使用flex布局即可。回答如下：
it seems that you are working on a chat app which show messages from new to old and have a textarea to edit message. for your question:
make chat-window-textarea to the bottom: you can use flex layout in the parent element chat-widnow-wrapper and set flex-direction: column, set chat-window to take the rest space;
make chat-window-wrapper to expand upwards: use flex and flex-direction: column-reverse;
the css is below:
.chat-window-wrapper {
width: 100px; /* for demo */
border: 1px solid #eaeaea; /* for demo */
height: 100px;
display: flex;
flex-direction: column; /* Reverse column to make it expand upwards */
}
.chat-window {
display: flex;
flex-direction: column-reverse;
overflow-y: auto; /* Enable vertical scroll if needed */
flex: 1;
}
demo:
https://codepen.io/nxoglrnh-the-decoder/pen/eYXmWYW大概意思是通过
使用flex-direction: column;设置聊天记录和操作区上下分布，聊天记录flex: 1;占据全部剩余空间，确保操作区在底部
聊天记录flex-direction: column-reverse;实现从下向上滚动显示聊天记录。
编辑答案意外获得Editor徽章
2023-12-28声望+徽章信息
今天登录账号发现通知栏声望徽章都有增加，应该是前天回答的问题带来的，进入个人主页查看。
解锁新特权talk in chat(聊天室)：解锁要求20声望，聊天室主要用于实时交流及对于较不结构化、随意（但仍然大致与主题相关）的对话
获得Teacher徽章：有一个答案获得1或者更多声望。
声望+35
--
FROM 1.204.118.*