html - "Overflow:scroll"不显示 't work for ": table-cell"

Question

我正在制作一个包含视频和播放列表的网页。我正在创建这样的东西

如您所见，播放列表已经溢出并且与视频不一致，尽管我为两者提供了相同的尺寸，并且当播放列表中的视频数量少于 4 时它可以正常工作。滚动也不起作用。

这是我的代码:

#video_player {
	display: table;
	line-height: 0;
	font-size: 0;
	background-image: url('recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg');
}
#video_player video,
#video_player figcaption {
	display: table-cell;
	vertical-align: top;
}
#video_player figcaption {
	width: 20%;
	height: 100px; 
}
#video_player figcaption a {
	display: block;
	opacity: .5;
	transition: 1s opacity;
}
 
#video_player figcaption a img,
figure video {
	width: 100%;
}
#video_player figcaption a:hover {
	opacity: 1;
}
@media (max-width: 1000px) {
	#video_player video,
	#video_player figcaption {
		display: table-row;
	}
	#video_player figcaption a {
		display: inline-block;
		width: 33.33%;
	}
}

<figure id="video_player">
	<video controls poster="83da1111cd7046afa5ddc90e31888d8d.jpg" autoplay="" id="video1" muted>
		<source src="video0.mp4" type="video/mp4" id="kl">
		<source src="video0.webm" type="video/webm">
	</video>
	<figcaption style="max-height:216px ;overflow:scroll" >
		<a id="q" href="video0.mp4"><img src="hqdefault (3).jpg" id="b4" alt="Nambia Timelapse 1" style="height: 72px;"></a>
		<a href="video1.mp4" id="q1"><img src="hqdefault (2).jpg" id="b5" alt="Nambia Timelapse 1" style="height: 72px;"></a>
		<a href="video3.mp4" id="q2"><img src="hqdefault.jpg" id="b6" alt="Nambia Timelapse 2" style="height: 72px;"></a>
		<a href="video3.mp4" id="q3"><img src="hqdefault (1).jpg" id="b7" alt="Nambia Timelapse 3" style="height: 72px;"></a>
	</figcaption>
</figure>

overflow:'scroll' 不工作。溢出也不适用于 Firefox。我想为水平和垂直滚动工作。请帮忙。

Answer 1

我认为你需要在你的figcaption中添加一个额外的div，然后添加max-height: 216px;和 overflow-y: 滚动; 到它的 CSS。