Tips for avoiding overflow while utilizing animations

Question

Tips for avoiding overflow while utilizing animations

In my current project, I am facing an issue with a container div that has the CSS property overflow: auto which cannot be removed. Inside this container, there is another div that toggles between showing and hiding using an animation triggered by a button click. However, the problem arises when this inner div moves down, causing an overflow within the container. It is important to note that the inner div must remain within the container.

To better illustrate the problem, you can view an example at the following link: https://jsfiddle.net/wg3jzkd6/1/

The desired outcome is as follows:

The inner div should move down smoothly without causing any overflow within the container.

html css

Answer 1

Answer №1

@manuel, could you please consider relocating the absolute div within the content div? If possible, try incorporating the overflow: hidden; property on the content div

document.getElementById('button').addEventListener('click', () => {
    const absolute = document.getElementById('absolute-div')
  const absoluteClass = absolute.getAttribute('class')
  
  if(absoluteClass.includes('hidden'))
        absolute.setAttribute('class', 'absolute-div shown')
  else
    absolute.setAttribute('class', 'absolute-div hidden')
})

@keyframes hide {
    from {
        transform: translateY(0);
    }
    
    to { 
        transform: translateY(100%);
    }
}

@keyframes show {

    from {
        transform: translateY(100%);
    }
    
    to { 
        transform: translateY(0);
    }
}

.container {
  position: relative;
  overflow: auto;
  border: 1px solid black;
  height: 80vh;
  width: 40vw;
  margin: 0 auto;
  padding: 1rem;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100%;
  background-color: green;
  overflow:hidden;
}

.absolute-div {
  background-color: blue;
  min-height: 20%;
  width: 100%;
  position: absolute;
  left: 0;
  bottom:0;
  display:inline;
}

.hidden {
  animation: hide ease forwards 300ms;
}

.shown {
  animation: show ease forwards 300ms;
}

<html>
<body>
  <div id='container' class='container'>
    
    <div class='content'>
    
       <button id='button'>
       SHOW/HIDE
       </button>
       
       <div id='absolute-div' class='absolute-div'>
        Hello world
      </div>
      
    </div>
    
  </div>
</body>
</html>

Hopefully, implementing this adjustment will help address the issue you are encountering...

Answer 2

@manuel, could you please consider relocating the absolute div within the content div? If possible, try incorporating the overflow: hidden; property on the content div

document.getElementById('button').addEventListener('click', () => {
    const absolute = document.getElementById('absolute-div')
  const absoluteClass = absolute.getAttribute('class')
  
  if(absoluteClass.includes('hidden'))
        absolute.setAttribute('class', 'absolute-div shown')
  else
    absolute.setAttribute('class', 'absolute-div hidden')
})

@keyframes hide {
    from {
        transform: translateY(0);
    }
    
    to { 
        transform: translateY(100%);
    }
}

@keyframes show {

    from {
        transform: translateY(100%);
    }
    
    to { 
        transform: translateY(0);
    }
}

.container {
  position: relative;
  overflow: auto;
  border: 1px solid black;
  height: 80vh;
  width: 40vw;
  margin: 0 auto;
  padding: 1rem;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100%;
  background-color: green;
  overflow:hidden;
}

.absolute-div {
  background-color: blue;
  min-height: 20%;
  width: 100%;
  position: absolute;
  left: 0;
  bottom:0;
  display:inline;
}

.hidden {
  animation: hide ease forwards 300ms;
}

.shown {
  animation: show ease forwards 300ms;
}

<html>
<body>
  <div id='container' class='container'>
    
    <div class='content'>
    
       <button id='button'>
       SHOW/HIDE
       </button>
       
       <div id='absolute-div' class='absolute-div'>
        Hello world
      </div>
      
    </div>
    
  </div>
</body>
</html>

Hopefully, implementing this adjustment will help address the issue you are encountering...

Answer 3

Answer №2

From my perspective, it seems like you are dealing with a situation where your container has excess overflow. One potential solution could be applying the CSS property overflow: hidden; to your container div.

Answer 4

From my perspective, it seems like you are dealing with a situation where your container has excess overflow. One potential solution could be applying the CSS property overflow: hidden; to your container div.

Answer 5

Answer №3

Simply update the overflow property to hidden

document.getElementById('button').addEventListener('click', () => {
    const absolute = document.getElementById('absolute-div')
  const absoluteClass = absolute.getAttribute('class')
  
  if(absoluteClass.includes('hidden'))
        absolute.setAttribute('class', 'absolute-div shown')
  else
    absolute.setAttribute('class', 'absolute-div hidden')
})

@keyframes hide {
    from {
        transform: translateY(0);
    }
    
    to { 
        transform: translateY(100%);
    }
}

@keyframes show {

    from {
        transform: translateY(100%);
    }
    
    to { 
        transform: translateY(0);
    }
}

.container {
  position: relative;
  overflow: hidden;
  border: 1px solid black;
  height: 80vh;
  width: 40vw;
  margin: 0 auto;
  padding: 1rem;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100%;
  background-color: green;
}

.absolute-div {
  background-color: blue;
  min-height: 20%;
  width: 100%;
  position: absolute;
  left: 0;
  bottom:0;
}

.hidden {
  animation: hide ease forwards 300ms;
}

.shown {
  animation: show ease forwards 300ms;
}

<html>
<body>
  <div id='container' class='container'>
    <div class='content'>
       <button id='button'>
       SHOW/HIDE
       </button>
    </div>
    
    <div id='absolute-div' class='absolute-div'>
      Hello world
    </div>
  </div>
</body>
</html>

Answer 6

Simply update the overflow property to hidden

document.getElementById('button').addEventListener('click', () => {
    const absolute = document.getElementById('absolute-div')
  const absoluteClass = absolute.getAttribute('class')
  
  if(absoluteClass.includes('hidden'))
        absolute.setAttribute('class', 'absolute-div shown')
  else
    absolute.setAttribute('class', 'absolute-div hidden')
})

@keyframes hide {
    from {
        transform: translateY(0);
    }
    
    to { 
        transform: translateY(100%);
    }
}

@keyframes show {

    from {
        transform: translateY(100%);
    }
    
    to { 
        transform: translateY(0);
    }
}

.container {
  position: relative;
  overflow: hidden;
  border: 1px solid black;
  height: 80vh;
  width: 40vw;
  margin: 0 auto;
  padding: 1rem;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100%;
  background-color: green;
}

.absolute-div {
  background-color: blue;
  min-height: 20%;
  width: 100%;
  position: absolute;
  left: 0;
  bottom:0;
}

.hidden {
  animation: hide ease forwards 300ms;
}

.shown {
  animation: show ease forwards 300ms;
}

<html>
<body>
  <div id='container' class='container'>
    <div class='content'>
       <button id='button'>
       SHOW/HIDE
       </button>
    </div>
    
    <div id='absolute-div' class='absolute-div'>
      Hello world
    </div>
  </div>
</body>
</html>

Answer 7

Answer №4

I am puzzled as to why I cannot change the value of overflow: auto. Surprisingly, it seems to work fine when the overflow property is set to hidden.

If altering from auto triggers some unknown effect, I suggest providing a clear explanation for it. However, if there are any issues, they could potentially be resolved by enclosing the entire structure within another div element and isolating it to prevent any unforeseen complications.

Answer 8

I am puzzled as to why I cannot change the value of overflow: auto. Surprisingly, it seems to work fine when the overflow property is set to hidden.

If altering from auto triggers some unknown effect, I suggest providing a clear explanation for it. However, if there are any issues, they could potentially be resolved by enclosing the entire structure within another div element and isolating it to prevent any unforeseen complications.

Tips for avoiding overflow while utilizing animations

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Understanding the separation and communication techniques in Vue.js components

Retrieving the following element

Unexpected vertical line in MUI5 Stepper appears when invoking from a function

Implementing pagination within an Angular 11 Mat-table with grouping feature

Having an issue with my code in angular 12 where I am unable to successfully call an API to retrieve a token, and then pass that token to another API for further processing

The hover effect on the menu button is not covering the entire button when the screen is resized

Issues are arising with the .mouseover functionality within this particular code snippet

How to Keep Bootstrap 3 Accordion Open Even When Collapsed

AngularJS filter that retrieves only values that have an exact match

@keyframes shimmering-fade

Maintain line breaks in the scanner input within an HTML element

How is the height and width of the header determined?

The hierarchy of CSS in Vue components

"Ensuring a DIV element has a height of 100% within

creating and managing multiple redirect routes in vue.js application

Designing tables and image galleries using HTML, CSS, and jQuery: A guide

The UI does not display the html code (specifically svg) added through jquery appending

How can I switch the visibility of two A HREF elements by clicking on one of them?

Challenges arising from the offset in an overflowing Div

Difficulty in vertical alignment of inline-block elements