“溢出：滚动”不适用于“display：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

我认为您需要在div内添加figcaption，然后将max-height: 216px;和overflow-y: scroll;添加到其CSS中。

Answer 2

我认为你想要的是在某个特定的固定高度之后滚动table-cell。如果我说得对，这就是解决方案：

您想要#video_player figcaption的固定高度，但由于它是display，因此请输入table-cell。给出固定高度not possible。您可以在已修复element的{​​{1}}中添加table-cell。

更新

height:216px或table具有最小高度，具体取决于table-row的内容，而不考虑固定高度（如果给予table-cell）。

因此，如果您将固定高度设置为table-cell，则无关紧要，因为table-cell / table-row已经具有单元格的实际内容高度。然后table占据全部高度。

  

“'表'行的'auto'值为'auto'，表示用于布局的行高是MIN.MIN取决于单元格框高度和单元格对齐（非常类似于a的计算）行框高度。“

了解更多Table height algorithms

检查一下：

table-cell

.tab {
  display: table;
  width:100%;
}
.cell {
  display: table-cell;
  vertical-align: top;
}
.cell_2 {
  width: 20%;
}
.cell_2 .inner_cell {
  height: 216px;
  overflow:auto;
}  
.cell_2 img {
  display: block;
  opacity: .5;
  transition: 1s opacity;
  max-width: 100%;
}

我希望这可以帮到你！