Question 174798 in Html Question posted in
Some basic documentation can be found here.

Html – Overflow-y auto in pop up

I have a question regarding overflow-y:auto and pop up. I have 2 divs inside a pop up but only on the second one I want to implement some scrolling if needed. The pop up has a max-height so if the second div has a bigger height than the max height of the pop up I would expect to see a scroll. But in fact that is not what happens. The second div just increases to a higher height than the pop up extending to a place out of the pop up. Why does this happen?

This is how it looks like:

enter image description here

The css:

.class1 {
    max-height: 100px;
    
}

.class2 {
    height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

The HTML:

enter image description here

Tags:

2

Answers


  1. 0

    If you want to make the class2 scroll inside class1, you need to add this css inside class1 (the popup container):

          overflow: scroll;

    Full Code:

    .class1 {
    max-height: 100px;
    overflow: scroll;
}
.class2 {
    height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

    For more info visit: overflow – css tricks

    Login or Signup to reply.
  2. 0
    1. I found a bug in your code as class1 is the parent class for class2. You set a max height to the parent class, class 1. Class2 has a height of 300px, which is more significant than the parent class class1. So basically the child class is already bigger than the parent class class1. When you enter content in the child class that is class2 it grows more than the height of the parent class that is class1. Now the solution code is:
    .class1 {
  max-height: 300px;
}
    
.class2 {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search