"Overflow:scroll" doesn't work for "display: table-cell"

Question

I'm making a web page that contains videos and playlist. I'm creating something like this

As you can see the playlist has overflowed and is not inline with the video though I have given the same dimensions for both and it is working when the number of videos in the playlist is less than 4. Also scroll is not working.

Here is my code:

#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' is not working. Also overflow is not working on firefox. I want to work both for horizontal and vertical scroll. Please help.

Answer 1

I think what you want is to have scroll in table-cell after some specific fixed height. If i got you correct this is the solution:

You want fixed height for your #video_player figcaption, but since it's display type table-cell. It is not possible to give fixed height. You can add an element in your table-cell which has fixed height:216px.

Update:

The table or table-row will have minimum height depending on the table-cell's content without considering the fixed height(if given to table-cell).

So if you give fixed height to table-cell it doen't matter, as table-row/table is already of actual content height of cell's. Which then table-cell takes the full height.

"A 'height' value of 'auto' for a 'table-row' means the row height used for layout is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height)."

For more Table height algorithms

Check this out:

.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%;
}

<div class="tab">
  <div class="cell cell_1">
    <iframe width="460" height="215" src="https://www.youtube.com/embed/rMNS9oNCL3s" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="cell cell_2">
    <div class="inner_cell">
      <img src="http://placehold.it/150x150" />
      <img src="http://placehold.it/150x150" />
      <img src="http://placehold.it/150x150" />
      <img src="http://placehold.it/150x150" />
    </div>
  </div>
</div>

I hope this helps you!

Answer 2

I think you need to put an additional div inside your figcaption, and then add max-height: 216px; and overflow-y: scroll; to its CSS.