作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
<分区>
我正在尝试制作一个简单的聊天窗口,其中消息固定在窗口的右侧和底部。当消息溢出窗口时,我希望聊天窗口滚动。
我正在使用 flexbox 来定位消息,并为窗口提供 overflow-y: auto;
。出于某种原因,我无法理解这是行不通的。如果我从窗口中移除 flex 定位,滚动将正常工作并按预期进行。为什么 flexbox 会改变滚动行为?
这是一个非常简单的代码笔,它显示了这个问题: https://codepen.io/skypod/pen/OdavbR
.chat-window {
background-color: grey;
width: 400px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
overflow-y: auto;
}
.message {
background-color: blue;
color: white;
padding: 0.5rem;
margin: 0.25rem;
}
<div class="chat-window">
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
</div>
我是一名优秀的程序员,十分优秀!