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

Troubleshooting the Problem with CSS Margin in HTML Footer

Troubleshooting issue with ng-change function in AngularJS

Looking to extract specific information from a webpage using VBA

Discover the best way to reference a JavaScript variable within an HTML form textfield

Extract information from various webpages with identical URLs

What could be causing the HTML content to not display when the code is executed?

Why does the styling on my <a> tags in the footer only take effect when I apply padding to the form above?

I am having trouble getting bootstrap-icons to work in my Angular project and I'm eager to figure it out

After moving a JavaScript application to heroku, the script appears to be nonfunctional

The date selection tool is failing to appear on the screen

The icons from MaterializeCSS are not displaying correctly on the navbar within an Angular 7 project

What is the best way to horizontally center a div while ensuring the content within the div stays aligned?

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

Issue with Custom Dropdown input not triggering blur event

Utilizing JQuery to differentiate a single element within a group of elements

JavaScript program that continuously reads and retrieves the most recent data from a dynamically updating JSON file at regular intervals of every few seconds

When using a routerlink in an a tag with Bootstrap 4, the navigation tab functionality may not work as expected

Is it possible to modify the background color of the firefox address bar according to the type of protocol being used?

Ensuring the image is properly sized to fit the screen and enabling the default zoom functionality

Which element can be slotted?