Html 如果内部内容占用的空间大于剩余空间，如何使flex元素占据剩余空间而不增长？

在下面的代码片段中，您可以看到我有一个

容器

元素，它有三个子元素

一个
，
两个
和
三个

Container
的高度为100vh，子
one
和
three
占据该空间的每一个
50px
，子
two
通过
flex:1
占据剩余空间

现在我的问题是，如果is中的内容占用的空间比最初获得的剩余空间多，如何防止子
two
增长？想象一下，如果我在child
two
中填充100个
Hello
元素，我不希望它变大


*，*：之后，*：之前{
保证金：0；
填充：0；
-webkit框大小：边框框；
框大小：边框框；
文字装饰：无；
列表样式类型：无；
}
身体{
字体系列：“Roboto”，“Helvetica”，“Helvetica Neue”，“Arial”，无衬线；
}
.flex{
显示器：flex；
}
.响应图像{
宽度：100%；
身高：100%；
}
.表情符号{
显示：内联块；
宽度：30px；
高度：30px；
}
.聊天{
弹性：1；
显示器：flex；
弯曲方向：立柱；
背景色：#36393f；
高度：100vh；
}
.聊天室容器{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.选定的房间名称{
填充：20px；
颜色：#ffffff；
字号：500；
字体大小：16px；
边框底部：2倍实心rgba（0,0,0,0.2）；
}
.图像容器{
宽度：40px；
高度：40px；
边界半径：50%；
溢出：隐藏；
右边距：15px；
}
.留言{
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
弹性：1；
填充：20px；
溢出：自动；
}
.邮件正文{
显示器：flex；
对齐项目：居中；
}
.留言{
显示器：flex；
对齐项目：居中；
背景色：#40444b；
填充：15px；
边界半径：10px；
边缘底部：20px；
颜色：#E0；
}
.留言：最后一个孩子{
边缘底部：0px；
}
.删除邮件{
显示：无；
左边距：自动；
光标：指针；
}
.message:hover>。删除邮件{
显示：块；
}
.用户名日期容器{
显示器：flex；
边缘底部：10px；
}
.用户名{
裕度：0 10px 0 0；
字号：500；
}
.日期{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：14px；
}
.表格容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.emojis按钮容器{
位置：相对位置；
右边距：20px；
背景色：#40444b；
高度：46px；
宽度：46px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：0px 5px 0px；
}
.发送消息{
填充：20px 0px 20px 20px；
弹性：1；
}
.信息输入{
宽度：100%；
填充：15px；
大纲：无；
边界：无；
背景色：#40444b；
颜色：#dcddde；
字体大小：14px；
边界半径：5px 0 5px；
}
.表情按钮{
光标：指针；
高度：30px；
宽度：30px；
滤镜：灰度（100%）；
转换：所有.2易入易出；
}
.emojis按钮：悬停{
滤镜：灰度（0%）；
转换：比例（1.1）；
}
.emojis选择器容器{
位置：绝对位置；
顶部：-200px；
右：0；
宽度：100%；
高度：200px；
填充：10px；
显示器：flex；
背景色：#2f3136；
}

服务器
用户
11111
嘿
用户
11111
嘿
用户
11111
嘿
用户
11111
嘿
用户
11111
嘿
用户
11111
嘿