"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.

You just have 4 videos in here all of them are visible, so no scroll will be needed. Now if you give height less then those 4 video in total has to "figcaption" or to your "figure", it will need scroll. — divy3993
– divy3993, Commented Mar 25, 2017 at 19:40
@divy3993 but i want it to scroll when height>216px and it is happening due to the 4th video — aeshna
– aeshna, Commented Mar 25, 2017 at 19:41
Try giving height:216px; to your #video_player figcaption, and let me know if it helps, by replacing your 100px; — divy3993
– divy3993, Commented Mar 25, 2017 at 19:46
@divy3993 in html part i have already given that and i did that in css part as well but still not working — aeshna
– aeshna, Commented Mar 25, 2017 at 19:50

TuomasK · Accepted Answer · 2017-03-25 20:41:05Z

3

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.

answered Mar 25, 2017 at 20:41

TuomasK

4873 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

divy3993 Over a year ago

Yes the same thing! @aeshna You can accept this answer.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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!

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Update:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Update:

Comments

Your Answer

Sign up or log in

Post as a guest

Related