Using sticky for 2 columns is overlapsing

[geosigno]

I use sticky kit on a 2 columns layout. Simple blog mockup, a sidebar on the right become sticky when it reach its end, then only content on the left scroll.

<div class="row">
<div class="column main"></div>
<div class="column sidebar"></div>
<div>

$('.main, .sidebar').stick_in_parent();

Issue is the .sidebar is overlpasing the .main, it stick to the left.

I use Foundations 6 flexbox grid.

It was working before... since I must have change something and impossible for me to find the issue. I looked in every place possible, try all options possible but nothing.

Can you help on this one?

[geosigno]

I solved it by myself.

Position fixed on a direct flex child was mistaken. Absolute and fixed elements are out of the flexbox flow.

I just needed to add a container inside the flex child, add the stiky method on them, and specify the parent is the row and not the column.

<div class="row">
  <div class="column main">
    <div class="sticky"></div>
  </div>
  <div class="column sidebar">
    <div class="sticky"></div>
  </div>
<div>

$('.sticky').stick_in_parent({parent: '.row'});