Элементы нижнего ряда невидимы

Question

Я отображаю элементы изображения в строках и столбцах, но первый элемент в строке ниже всегда невидим. Я добавляю и удаляю классы элементов с помощью keyEvents (это то, что я имею в виду, говоря ниже строки, это означает ниже строки currentIndex). Я хочу, чтобы они были правильно выровнены. Кроме того, я не могу использовать flexbox или grid, потому что приложение будет работать в старых браузерах. HTML код:

  <div>
    <h2>Kanal Listesi</h2>
    <div class="container">
      <div>
      <Channel v-for="(channel,index) in channels" :key="index" :channel="channel" :ref="index"/>
      </div>
    </div>
  </div>

<style scoped>
.container {
  display: inline-block;
  /*flex-flow: row wrap;
  /*min-width:1200px;
  overflow-x:auto;      */
  justify-content: center;
}
.container::after {
  content: "";
  flex: 0 1 32.7%;
}
div {
  text-align: center;
}
div > div > div > div {
  padding: 0 4px;
  float: left;
}
@media only screen and (max-width: 1199px) {
  .container::after {
    content: "";
    flex: 0 1 38.7%;
  }
}
</style>

Компонент канала:

<div v-if="channel.ChName">
      <img :src="'http://portal.uyanik.tv/resize.php?img='+channelPath+'&type=stb'" :class="{selectedIndex:this.$vnode.key === this.$parent.currentIndex}">
</div>

<style>
div > img{
margin: 10px;
}
.selectedIndex {
  border: 5px solid;
  border-color: aquamarine;
  opacity: 0.8;
  transition: 0.2s;
}
</style>

Вот как это выглядит сейчас Также, когда вы go над правыми изображениями, все изображения в строке ниже пока тот же столбец тоже невидим:

Редактировать: Если я установлю высоту img на 100px, ошибка исчезнет, ​​но я не разрешено делать это, поскольку устройство потребляет слишком много памяти для выполнения этой задачи.