Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Inside flex container causes header to stick

See original GitHub issue

Describe the bug When the Timeline component is inside a flex, the header no longer follows the main timeline

To Reproduce

https://codesandbox.io/s/timeline-demo-sticky-header-f76cu?fontsize=14&hidenavigation=1&theme=dark

Add wrap the timeline component in a div with a display : flex

Expected behavior To follow main timeline

Screenshots Untitled

Library Version 0.26.7

Desktop (please complete the following information): osx chrome

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:5

Top GitHub Comments

1reaction

Ilaiwicommented, Feb 17, 2020

@dandanknight I don’t know how to solve this issue or the cause of it tbh but I think when this PR #695 gets merged this might be fixed

0reactions

Adrien-Pcommented, Dec 7, 2020

I had a similar issue and wrapping the Timeline component inside a div with overflow: scroll solved the issue in my use case. I don’t know if it will solve all the issues related to wrapping the Timeline in a flex container. Try it as a potential workaround. Sandbox code here (just added one div from OP sandbox)

Top Results From Across the Web

My position: sticky element isn't sticky when using flexbox

Since flex box elements default to stretch , all the elements are the same height, which can't be scrolled against.

Use Flexbox to Create a Sticky Header & Sidebar with Flexible ...

A sticky header; A sticky, flexible-width sidebar; A flexible main content container (which changes width based on the content of the sidebar) ...

Building Website Headers with CSS Flexbox - Ahmad Shadeed

The header above doesn't have an inner wrapper that contains its logo and navigation elements. This can cause problems on large screens. Notice ......

Typical use cases of flexbox - CSS: Cascading Style Sheets

In this guide, we will take a look at some of the common use cases for flexbox — those places where it makes...

4. Flexbox Examples - Flexbox in CSS [Book] - O'Reilly

You now have a complete understanding of the CSS Flexible Box Layout Module ... In this scenario we will have the navigation appear...