From absolute to fixed element on flexbox layout - css

Question

How would you make an element go from position:absolute; to position:fixed; when parent is flexbox ?
Let me explain further: I have a very basic layout 100% flexbox based. The layout is just a left sidebar and a content area. In the content area lives a header which starts at 400px from the top and is absolutely positioned (in order to cover a hero section), the desired UX is to make this header sticky after it touches the top of the screen.
Here is a pen for illustration.
Now, I have the mechanism to programatically switch the header from absolute to fixed at a given scroll position, this is not a problem.
The problem is, when fixed:
1. the header covers the scrollbar to the right (real issue)
2. left side of the header has to be known in order to set the left: property (minor issue: I can live with it as my sidebar has a fixed width I can copy from).
I heard about a position:sticky which does the trick, but it seems not that reliable as not really well supported so far.
Of course I cannot know size of the scrollbars as it depends on each navigators... otherwise I would just do right:17px; or something like that. ;)
EDIT
The culprit of the "bug" forcing the header to overlap the scrollbar is the overflow:auto set on #content.
However, as the layout is flexbox based, I don't see how to avoid use of this approach as the sidebar is sticky by definition using basic flexbox. So an underlying question would be: How to stick an element within flexbox, USING FLEXBOX ? The position:fixed is clearly not compatible as it breaks the flow... Also, the obvious step would be to avoid flexbox and redesign the whole layout using classical positioning, but this is out of the purpose: the layout has to be compatible with react-native which ignores classic CSS positioning (uses flexbox only)... See here. (of course, react-native has another way to handle scrolling, hence the problem in web environments).
In order to proceed with my design, I had to make a decision and I went using position:absolute only, but adjusting my top property programatically (using react but could be implemented with Jquery or whatever technology able to know the current scroll position).
In pseudo-code, it would like :
//when scroll reaches 400px
if getScrollTopPostion() > 400
//recalculate top position of given element to equal current Scroll position.
//This gives the effect that the element is sticky. In reality it is just live recalculated...
//Quid of performances?? no idea
then setTop( getScrollTopPostion() )
//otherwise, let the element absolutely positioned at 400
else 400
Obviously, this does NOT answer the initial question.
The "official" answer would be to use position:sticky, but until it gets really spread across say 95% of browsers (particularly mobile ones...), I would say the proper answer is still to be found.

Answer 1

For fixing the 1st issue, try this:
#main #content #header {
position: fixed;
...
}
Remove the overflow: auto; property from #content. And also add align-items:stretch to #sideBar.