Ensure container height larger than items

[CupOfTea696]

When hiding / showing items it happens sometimes that the container's height changes faster than the items' opacities. This causes items to get "cut off" at the bottom. I removed the fade effect to make this issue more visible.

I'm using a flexbox layout.

My Configuration:

{
    animation: {
        effects: 'stagger(50ms) scale(0.5)',
        duration: 40000,
        easing: 'ease',
        perspectiveOrigin: '50% 0',
        animateChangeLayout: true,
        animateResizeTargets: true
    },
    controls: {
        enable: false
    },
    layout: {
        display: 'block',
        containerClassFail: 'empty'
    },
    selectors: {
        target: '.feed-item'
    }
}

[patrickkunka]

The best solution to this problem is to apply a min-height to your container to ensure that elements are never "cut off"

[CupOfTea696]

I can't really do that, this page has dynamic content. This would cause the page to on occasions have a way larger height than necessary, and on other occasions the min-height might not be enough and I'd still have this issue. I hope you can consider reopening this issue.

[patrickkunka]

Thanks for the additional information - that's very useful. Does your project require overflow: hidden; on your container?

[CupOfTea696]

It does, yeah.

[patrickkunka]

Would you mind sending me a link to the page (if its live)?

[CupOfTea696]

Unfortunately I can't, this was client work for a campaign site, and the campaign has ended so we took the site down.

[tsawitzki]

@CupOfTea696 Would be curious to find out what you did to overcome the problem …?

[CupOfTea696]

@tsawitzki I don't have a solution. The site went live with the bug.

[Kwapi]

I might have a similar issue. When I change the page on my news section the whole mixitup container seems to disappear for a split second. I tried adding min-height to both the mixitup container and the parent div but nothing works.

Here's the video of the issue:
Google drive link

[tsawitzki]

@Kwapi can you give some information on how you specified the min-height? Did you use % or vh units? Maybe in case of % there is no relation as to what the min-height refers to?
Maybe you need to wrap something around the whole mixitup container and specify the min-height there? In your video even the whole footer moves up, so I was thinking there is some issue with the general html/css architecture maybe?

[patrickkunka]

Hi @Kwapi - this isn't related to the issue above, but is more likely a markup structure issue. Would you be able to share a link to your project? (also if you could open a new issue for it that would be great). Thanks.

[Kwapi]

@tsawitzki @patrickkunka
I answered your questions and moved the issue to here