固定容器div时，嵌套子div无法滚动

Question

I have a container div (modal) that is set to position: fixed (absolute is not an option for my purpose). Inside of this container I have two columns. One of these columns contains tab buttons with below them some content or a form. This content (only the content, not the tabs) should be scrollable but I can't figure out how.

The height of the tabs can change so the solution can't contain a fixed height for the tab bar.

I've tried to make the whole column scrollable first by setting the column to position: relative , min-height: 100% and overflow-y: scroll but this first try didn't even work.

Codepen with basic setup

EDIT

Not a duplicate of How to make child div scrollable when it exceeds parent height?

• I'm working inside a fixed container
• I'm working with flexible heights
• Trying to achieve a css only solution

Answer 1

This issue is occurring because you are not declaring "max-height" to container ".details-column".

Try below CSS :

.content{ max-height: 400px; overflow-y: auto; }

Note: You have to set fixed height or fixed max-height of the container otherwise container won't know when it has to scroll data.

Answer 2

Excerpt from W3School :

The overflow property only works for block elements with a specified height.

but since you've flexible height element doesn't know when to overflow as it will just keep on growing.

you'll most likely have to define a height or max-height or even use JS to calculate height, other suggestion i can make is to play around with white-space property as well as calc() for height.

Edit: Here is a very good source to help you understand overflows: https://www.brunildo.org/test/Overflowxy2.html

Good Luck.

Answer 3

By applying following css your div will be scrollable.

.content{
  height: 80%;
  overflow-y: auto; 
}

Answer 4

this is because there is not much content to make it scroll.. put some content and try.. check below link

overflow-y: auto 

add this to the modal class. thanks

https://codepen.io/Xenio/pen/mvbpJV 99