Как уменьшить адаптивное изображение в гибком контейнере с фиксированной высотой

Question

Я хочу отобразить некоторые div, содержащие изображение и два div с текстом в нем, в контейнере flexbox с фиксированной высотой.Эти элементы представляют треки с обложкой альбома, названием песни и именем исполнителя.

Примерно так:

<div class="flex-container">
  <div class="track">
    <img class="track--image" src="http://lorempixel.com/400/400/">
    <div class="track--artist-name">Artist</div>
    <div class="track--track-name">Song</div>
  </div>
  <div class="track">
   .
   .
   .
</div>

CSS:

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

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

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

.track--name,
.track--artist-name {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Проблема в том, чточто изображение имеет ширину 100%, чтобы поместиться в родительский элемент div.Но это также подразумевает, что он переполняет своего родителя.А также два div внутри track div выталкиваются за пределы своих родителей.

Как предотвратить слишком большое изображение для его родительского div, чтобы изображение и два div помещались внутри родительского элемента??

Я также подготовил кодовую ручку, чтобы лучше описать проблему: https://codepen.io/anon/pen/YBQGRb

РЕДАКТИРОВАТЬ:

Мои ожидания выглядят примерно так: Как вы можете видеть, светло-серый контейнер - это мой flex-контейнер, внутри которого я хочу получить мои треки.Изображение и эти два текста должны помещаться в пределах, даже если высота флекс-контейнера изменяется.

Answer 1

Если вы редактируете свой класс изображений таким образом, он работает.

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

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

https://codepen.io/anon/pen/XOadGO

Answer 2

Теперь я исправил свою проблему следующим образом:

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

Это работает не для каждой высоты flex-контейнера, но в моем случае это нормально.

Answer 3

Имеет ли переключение высоты на автоматический в вашем .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;
}