Html div的一个子项可滚动一个固定位置

我刚刚在学习如何使用SASS和CSS，我在弄清楚如何使chat div的内部可滚动，同时在滚动时保持底部的输入字段不变时遇到了一些严重的问题。虽然我知道如何固定底部输入栏，但现在发生了两件事：

 1. The whole div does not scroll anymore
 2. Being fixed, now the width of the bottom bar is the same as the screen size since it is 100%, although I need it to be the same as its parent div. 

我觉得我肯定错过了一个知道CSS的人会在一秒钟内发现的东西，但我花了几个小时试图找出它，但仍然没有。以下是我的CSS/HTML：

这是我的密码：

#帧{
宽度：计算（100%+30px）；
最小宽度：360px；
高度：92vh；
最小高度：300px；
背景：#E6EAEA；
左边距：-15px；
右边距：-15px；
}
@媒体屏幕和屏幕（最大宽度：360px）{
#框架{
宽度：100%；
高度：100vh；
}
}
#框架.内容{
浮动：对；
身高：100%；
溢出：隐藏；
位置：相对位置；
}
@媒体屏幕和屏幕（最大宽度：735px）{
#框架.内容{
宽度：100%；
最小宽度：300px！重要；
}
}
@媒体屏幕和屏幕（最小宽度：900px）{
#框架.内容{
宽度：100%；
}
}
#frame.content.contact配置文件{
宽度：100%；
高度：60px；
线高：60px；
背景:#f5；
}
#frame.content.contact-profile-img{
宽度：40px；
边界半径：50%；
浮动：左；
利润率：9px 12px 0 9px；
}
#frame.content.contact profile p{
浮动：左；
}
.联系方式{
溢出：隐藏；
}
#frame.content.messages{
高度：自动；
宽度：100%；
最小高度：计算（100%-60px）；
最大高度：计算（100%-60px）；
溢出：隐藏；
}
@媒体屏幕和屏幕（最大宽度：735px）{
#frame.content.messages{
最大高度：计算（100%-105px）；
}
}
#frame.content.messages:：-webkit滚动条{
宽度：8px；
背景：透明；
}
#frame.content.messages:：-webkit滚动条拇指{
背景色：rgba（0,0,0,0.3）；
}
#frame.content.messages.ulli{
显示：内联块；
明确：两者皆有；
浮动：左；
利润率：15px 15px 5px 15px；
宽度：计算（100%-25px）；
字号：0.9em；
}
#frame.content.messages ul li:n最后一个孩子（1）{
边缘底部：20px；
}
#frame.content.messages ul li.sent img{
利润率：6px 8px 0；
}
#frame.content.messages ul li.sent p{
背景#435f7a；
颜色：#F5；
}
#frame.content.messages ul li.responses img{
浮动：对；
利润率：6px08px；
}
#frame.content.messages ul li.p{
背景:#f5；
浮动：对；
}
#frame.content.messages ul li img{
宽度：22px；
边界半径：50%；
浮动：左；
}
#frame.content.messages ul li p{
显示：内联块；
填充：10px 15px；
边界半径：20px；
最大宽度：205px；
线高：130%；
}
@媒体屏幕和屏幕（最小宽度：735px）{
#frame.content.messages ul li p{
最大宽度：300px；
}
}
#frame.content.message输入{
底部：0；
宽度：100%；
z指数：99；
}
#frame.content.message input.wrap{
位置：相对位置；
}
.聊天室输入{
浮动：左；
边界：无；
宽度：计算（100%-40px）；
边界半径：0；
填充：11px 32px 10px 8px；
文本呈现：优化易读性；
字号：0.8em；
颜色：32465a；
调整大小：无；
}
.信息输入{
位置：固定；
底部：0；
宽度：100%；
}
.chatmessage提交{
浮动：对；
边界：无；
填充：12px；
光标：指针；
背景：#32465a；
颜色：#F5；
&：悬停{
背景#435f7a；
}
}
.部门年度{
浮动：对；
宽度：48%；
}
.科学院{
宽度：48%；
}
#msgs{
填充：0px；
溢出：自动；
高度：适合的内容；
}
#信息内容{
线高：13px；
边框：1px实心#ced4da；
}
.小组{
溢出：隐藏；
边缘底部：60px；
}
#结束聊天{
浮动：对；
字体大小：30px；
保证金：0px 12px 12px 12px；
}

聊天室测试



你准备好去肯尼亚了吗



怎么了



哈哈



格雷格



瑞斯格泰斯



rewgergewrg



埃尔卡法尔



refsrtagrwt



布尔德斯格瑟



测试洛洛洛



Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一家不知名的印刷商将一个印刷机上的铅字槽拼凑成一个铅字样本
书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表的发行而流行，等等
最近，Aldus PageMaker等桌面发布软件包括Lorem Ipsum版本



Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一家不知名的印刷商将一个印刷机上的铅字槽拼凑成一个铅字样本
书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem的Letraset图纸的发布而流行
<div class="parent">
<div class="child">
</div>
<button>Click</button>
</div>

.parent{
 position:relative

 .child{
 width: 300px;
 height: 500px;
 overflow: scroll;
 padding-bottom: 20px;
 }

 button{
 width: 300px;
 height:20px;
 position:absolute;
 bottom:0;
 }
}