Css 如何使flex项目在内容、列和内容溢出的情况下可滚动

我有一支钢笔，是我集合起来的。我有一个面板部分，里面有一个正方形的div，有一个列方向，但由于某些原因，我无法使该面板部分可以滚动，以容纳里面有高度的div。我尝试了overflow-y:auto，但它的行为并不像它应该的那样。现在，这些盒子只是缩回原位

.panel-section {
      flex-basis: 18vw;
      background-color: #BFFD19;
      padding-top: 15px;
      padding-left: 15px;
      padding-right: 30px;

      min-height: 0px;
      display: flex;
      flex-direction: column;
      .thumbnail-holder {
        margin-bottom: 15px;
        background-color: #6036AD;
        width: 95%;
        height: 160px;
      }
    }
  }

面板部分（右侧）和框是缩略图保持架。

---

我读过其他关于溢出的文章，但这些技术对我不起作用。

要使

.panel部分可滚动，请在其规则中添加
overflow:auto

然后，由于flex项目的默认值
flex-shrink
为
1
，这意味着它被设置为收缩以适合其父项，因此添加
flex-shrink:0
缩略图夹持器
，它们将保持其高度

此外，i.a.Firefox需要的一个修正是设置
minheight:0.top部分
上的code>，允许其小于其内容

注意，为了避免视口中出现垂直滚动条，更容易查看
.panel部分的滚动条
，我将
模式内容
元素上的内联样式更改为
宽度：100%
（
%
而不是
vw
）


堆栈片段


。模态内容{
显示器：flex；
弯曲方向：立柱；
}
.模态内容.顶部部分{
背景色：#2EC55C；
柔性生长：1；
最小高度：0；
显示器：flex；
}
.模态内容.顶部部分.内容部分{
柔性生长：1；
背景色：#6733FC；
显示器：flex；
弯曲方向：立柱；
}
.模态内容.顶部部分.内容部分.标题部分{
背景色：#21DE71；
弹性基准：10vh；
}
.模式内容.顶部部分.内容部分.啤酒部分{
背景色：#FA64FF；
柔性生长：1；
显示器：flex；
}
.模式内容.顶部部分.内容部分.啤酒部分.图像部分{
背景色：#90FF00；
弹性基准：50%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.modal内容。顶部部分。内容部分。啤酒部分。图像部分。图像容器{
背景色：#FBA02B；
高度：72vh；
宽度：55vh；
}
.模式内容.顶部部分.内容部分.啤酒部分.文本部分{
背景色：#F63333；
弹性基准：50%；
}
.模态内容.顶部部分.面板部分{
弹性基础：18vw；
背景色：#BFFD19；
填充顶部：15px；
左侧填充：15px；
右侧填充：30px；
最小高度：0px；
显示器：flex；
弯曲方向：立柱；
溢出：自动；
}
.模态内容.顶部部分.面板部分.缩略图支架{
边缘底部：15px；
背景色：#6036AD；
宽度：95%；
高度：160px；
弹性收缩：0；
}
.模态内容.底部部分{
背景色：#4283FA；
弹性基准：10vh；
}
@介质（最大宽度：1100px）{
.模态内容.顶部部分.面板部分{
弹性基础：25vw；
}
}
@介质（最大宽度：450像素）{
.模态内容.顶部部分.面板部分{
显示：无；
}
}

要在右侧面板中滚动吗？？？非常感谢您的洞察力和帮助。