Html 如何在没有固定高度的情况下使动态div溢出

我正在尝试创建一个没有固定高度父元素的滚动元素。我希望代码的

#第1节
可以滚动显示其余的图像。我似乎找不到办法来做这件事。我试图将
#SECTION1
设置为固定高度，但它会强制压缩我的图像。任何帮助都将不胜感激。多谢各位

这是我的密码：


*{
框大小：边框框；
保证金：0；
填充：0；
文字装饰：无；
}
：-webkit滚动条{
宽度：15px；
}
/*跟踪*/
：-webkit滚动条轨迹{
背景#f1f1；
}
/*处理*/
：-webkit滚动条拇指{
背景：#888；
}
/*悬停手柄*/
：-webkit滚动条拇指：悬停{
背景:#555；
}
html，
身体{
保证金：0；
填充：0；
高度：100vh；
溢出：隐藏；
}
/*----------第一节----------*/
标题{
高度：80px；
背景色：黑色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
}
#标题包装{
显示器：flex；
宽度：55%；
证明内容：之间的空间；
对齐项目：居中；
}
#标志{
宽度：70px；
}
导航a{
颜色：白色；
填充：20px；
字体系列：“Roboto”；
字号：0.8em；
字体大小：粗体；
}
@仅介质屏幕和（最大宽度：750px）{
导航{
显示：无；
}
}
#移动菜单{
颜色：白色；
字体大小：1.3em；
}
@仅介质屏幕和（最小宽度：750px）{
#移动菜单{
显示：无；
}
}
#车身包装{
显示器：flex；
身高：100%；
}
旁白{
宽度：300px；
高度：889px；
背景色：#0c；
显示器：flex；
对齐项目：居中；
填充顶部：50px；
弯曲方向：立柱；
}
#侧包装{
宽度：70%；
}
#用户信息{
显示器：flex；
利润率：10px；
左边距：0；
边缘底部：50px；
证明内容：中心；
对齐项目：居中；
字体系列：“Roboto”；
字体大小：400；
}
#使用者{
字体大小：40px；
颜色：白色；
右边距：20px；
}
旁白h3{
颜色：白色；
字体大小：1.2米；
}
#你好{
颜色：白色；
字体大小：20px；
}
#方框-1{
颜色：#808080；
边缘底部：60px；
}
#方框-1 p{
利润率：20px；
左边距：0；
字体系列：“Roboto”；
字号：0.9em；
}
#方框-2{
颜色：#808080；
}
#方框2 p{
利润率：20px；
左边距：0；
字体系列：“Roboto”；
字号：0.9em；
}
#第一节{
背景色：#191919；
/*背景：线性梯度（rgba（0,0,0,0.3），rgba（0,0,0,0.3）），
url（“listen_background.jpg”）*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
宽度：100%；
溢出：自动；
}
#第1节包装{
宽度：80%；
显示器：flex；
字体系列：“Roboto”；
填充顶部：50px；
填充底部：50px；
对齐项目：居中；
弯曲方向：立柱；
}
#第1节h1{
颜色：白色；
字号：3em；
边缘底部：50px；
文本对齐：居中；
}
.图像框{
最大宽度：280px；
利润率：20px；
}
img{
最大宽度：100%；
}
#图-row-1，
#图2-row-2，
#图3-row-3，
#图4-4{
宽度：100%；
边缘底部：50px；
显示器：flex；
证明内容：之间的空间；
}
@仅介质屏幕和（最大宽度：1080px）{
#图-row-1，
#图2-row-2，
#图3-row-3，
#图4-4{
弯曲方向：立柱；
对齐项目：居中；
}
}
/*----------------第二节--------------*/
#推手{
高度：889px；
宽度：300px；
}
#玩家{
高度：80px；
宽度：100%；
位置：固定；
底部：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：黑色；
}
@仅介质屏幕和（最大宽度：750px）{
#玩家{
高度：自动；
}
}
#播放器包装器{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
宽度：80%；
}
@仅介质屏幕和（最大宽度：750px）{
#播放器包装器{
弯曲方向：立柱；
}
}
.按钮控制{
颜色：白色；
利润率：20px；
}
#球员栏{
宽度：100%；
高度：3倍；
背景色：白色；
}
#播放器填充器{
宽度：50%；
身高：100%；
背景色：#2A4B5A；
}
#时间线{
宽度：50%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
@仅介质屏幕和（最大宽度：750px）{
#时间线{
宽度：100%；
}
}
#时间线p{
颜色：白色；
利润率：20px；
}
#分享，
#电话{
颜色：白色；
利润率：20px；
}
@仅介质屏幕和（最大宽度：750px）{
#分享，
#电话{
显示：无；
}
}

Flo音乐
伊曼纽尔
你的图书馆

最近玩

歌曲

播放列表

你的图书馆

最近玩

歌曲

播放列表

家

新版本
0:00

0:00

您应该在#部分1中更改溢出属性

默认情况下，弹性项目设置为。这意味着它们可以收缩以防止容器溢出。在您的情况下，可能需要禁用此功能（
flex-shrink:0
）


也可以考虑使用<代码>高度：100VH ，而不是在Flex容器上使用<代码>高度：100% 。百分比高度很复杂，通常要求父级具有定义的高度
有关详细信息，请参阅此帖子：


最后，从flex容器中删除
justify content:center
。它使内容无法通过scrol访问
#section1-wrapper {
overflow: scroll;
}

#body-wrapper {
  display: flex;
  /* height: 100%; */
  height: calc(100vh - 80px); /* subtract footer height */
}

#section1 {
  background-color: #191919;
  display: flex;
  align-items: center;
  /* justify-content: center; */ /* remove to avoid scrolling problems */
  flex-direction: column;
  width: 100%;
  overflow: auto;
}

#section1-wrapper {
  width: 80%;
  display: flex;
  font-family: 'Roboto';
  padding-top: 50px;
  padding-bottom: 50px;
  align-items: center;
  flex-direction: column;
  flex-shrink: 0; /* add to disable flex default shrinking feature */
}