html - 如何使视频建议 flex 元素与视频 flex 元素高度相同？

Question

我正在进行个人 UI 设计元素，我想在着陆页上添加视频部分。视频部分由两个 flex 列组成，一个是视频播放器，第二列是一个带有建议的垂直滚动 div。我对 CSS flex 很陌生，无法理解为什么可滚动的 div 与视频列的高度不同。

我需要将可滚动的 div 设置为固定高度，否则它会扩展其高度，直到其中的所有元素都可见，我不希望这样，我只希望它成为一个可滚动的 div。

这是它目前的样子:

这是我的标记:

<div class="video">
  <video src="videos/main.mp4" />
  <div class="suggestions">
    <div class="suggestion">
      <img src="thumbs/1.jpg" />
      <div class="caption">
        <h3>lorem ipsum dolor siet amet</h3>
        <p>29 june 2019</p>
      </div>
    </div>
    <div class="suggestion">
      <img src="thumbs/1.jpg" />
      <div class="caption">
        <h3>lorem ipsum dolor siet amet</h3>
        <p>29 june 2019</p>
      </div>
    </div>
  </div>
</div>

.video {
  display: flex;
}

.video video {
  flex: 1.5;
}

.video .suggestions {
  flex: 1;
  overflow-y: scroll;
}

我很想知道如何使可滚动的 div 与视频 div 的高度相同，同时保持视频的响应能力。谢谢!

Answer 1

你需要.video .suggestions {height: xxxx }

.flex-wrap{display:flex;}
.flex-left{flex:1.5;}
.flex-right{flex:1;position:relative;}
.video-wrap{position:relative;padding:56.25% 0 0;} /* 16:9 */
.video-player{display:block;position:absolute;top:0;left:0;width:100%;height:100%;}
.video-recom{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:scroll;}
.video-recom-item img{max-width:100%;}

<div class="flex-wrap">
	<div class="flex-left">
		<div class="video-wrap">
			<iframe class="video-player" src="https://www.youtube.com/embed/BzYnNdJhZQw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		</div>
	</div>

	<div class="flex-right">
		<div class="video-recom">
			<div class="video-recom-item">
				<img src="https://image.shutterstock.com/image-photo/bukchon-hanok-village-seoul-south-600w-718460350.jpg" />
				<div class="caption">
					<h3>lorem ipsum dolor siet amet</h3>
					<p>29 june 2019</p>
				</div>
			</div>
			<div class="video-recom-item">
				<img src="https://cdn.pixabay.com/photo/2014/04/17/05/16/myeongdong-326136_1280.jpg" />
				<div class="caption">
					<h3>lorem ipsum dolor siet amet</h3>
					<p>29 june 2019</p>
				</div>
			</div>
			<div class="video-recom-item">
				<img src="https://cdn.pixabay.com/photo/2014/04/17/05/16/myeongdong-326136_1280.jpg" />
				<div class="caption">
					<h3>lorem ipsum dolor siet amet</h3>
					<p>29 june 2019</p>
				</div>
			</div>
			<div class="video-recom-item">
				<img src="https://cdn.pixabay.com/photo/2014/04/17/05/16/myeongdong-326136_1280.jpg" />
				<div class="caption">
					<h3>lorem ipsum dolor siet amet</h3>
					<p>29 june 2019</p>
				</div>
			</div>
			<div class="video-recom-item">
				<img src="https://cdn.pixabay.com/photo/2014/04/17/05/16/myeongdong-326136_1280.jpg" />
				<div class="caption">
					<h3>lorem ipsum dolor siet amet</h3>
					<p>29 june 2019</p>
				</div>
			</div>
		</div><!-- //.video-recom-scroll -->

	</div>

</div>