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

Question

Я работаю над проектом разработки личного интерфейса, и я хотел добавить видео раздел на целевой странице. Раздел видео состоит из двух гибких столбцов, видеопроигрывателя, а во втором столбце - вертикальной прокрутки с предложениями. Я довольно новичок в 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

вам нужно .видео .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>