两个柔性元素，为什么缩小时会垂直居中？

Question

我们将视频作为flex元素，将playbar作为flex元素。视频为75％，播放栏占用休息减去paddding。当播放栏很长并且我们减小了屏幕尺寸时，视频缩小得很好但是丢失了它的顶部对齐并且在播放栏上垂直居中。我们如何使用flex将视频保持在顶部？

.cat-main {
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cat-video {
  ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%;
  -webkit-box-flex: 0;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  padding-bottom: 43.5%;
  position: relative;
  overflow: hidden;
}
.cat-playlist {
  padding-left: 5px;
  ms-flex-preferred-size: 23%;
  flex-basis: 23%;
  max-width: 23%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
}
.cat-video iframe,
.cat-video object,
.cat-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="cat-main">
  <div class="cat-video">
<iframe src="https://www.youtube.com/embed/kCT0Z23rcsc" width="100%" height="600" frameborder="0"></iframe>
  </div>
  <div class="cat-playlist">
    really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
  really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
  really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
  really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
 really long playlist code<br>
  </div>
</div>