Css 如何在固定高度的flex容器中收缩响应图像

我想在一个固定高度的flexbox容器中显示一些包含一个图像和两个包含文本的div的div。 这些div代表带有专辑封面、歌曲名称和艺术家名称的曲目

像这样：

艺术家
歌曲
.
.
.

CSS：

.柔性容器{
显示器：flex；
宽度：100%；
高度：100px；
背景颜色：浅蓝色；
}
.赛道{
边框：1px纯黑；
文本对齐：居中；
最大宽度：9雷姆；
颜色：黑色；
}
.轨迹--图像{
宽度：100%；
边界半径：50%；
}
.track--name，
.曲目--艺术家姓名{
宽度：100%；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}

问题是图像的宽度为100%以适合其父div。但这也意味着它会溢出其父div。而且

轨迹中的两个div也被推到其父对象之外

如何防止图像对于其父div过大，从而使图像和两个div都适合其父div

我还准备了一个代码笔来更好地描述问题：

编辑：

我的期望是这样的：
正如你所看到的，浅灰色的容器是我的flex容器，我想要我的track div。即使flex容器的高度发生变化，图像和这两个文本也应该在合适的范围内。
在.flex容器中将高度切换为自动是否会给您带来期望的结果

.flex-container {
  display: flex;
  width: 100%;
  height: auto;
  background-color: lightblue;
}

评论后

我在下面所做的就是在轨迹容器中添加少量填充，使图像脱离顶部边界，并通过控制宽度使图像适应流体容器

.track .track--image {
  width: 35%;
  height: auto;
  border-radius: 50%;
}

.track {
  border: 1px solid black;
  padding: 5px;
  text-align: center;
  max-width: 9rem;
  color: black;
}

如果您像这样编辑图像类，它会工作

.track {
  border: 1px solid black;
  text-align: center;
  width: 9rem;
  color: black;

  .track--image {
    border-radius: 50%;
    height:100%;
  }
}  

我现在这样解决了我的问题：

.track--image{
身高：66%；
边界半径：50%；
}

这并不适用于flex容器的每个高度，但在我的情况下是可以的。
在
.track.track--image
中使用
高度：100%
而不是
宽度：100%
？然后图像适合它的父级，但是两个div
.track--artist name
和
.track--name
溢出了它。不幸的是约束条件是flex容器具有固定高度。在我的示例中，为简单起见，设置了固定像素值。它将嵌入一个网格布局中，导致固定高度…在这种情况下，您是否能够增加固定高度？