Is there a way to make the position sticky work with content that has the style columns? I created an example in JSFiddle to demonstrate the issue: Check it out here
.sticky {
position: sticky;
top: 0;
background: #000;
color: #FFF;
}
.content {
height: 200px;
background: #FFF000;
}
.min {
width: 48%;
vertical-align: top;
display: inline-block;
}
.notworking {
columns: 100px 3;
}
<div class="min">
<div>
<div class="sticky">Working 1</div>
<div class="content">Content 1</div>
</div>
<div>
<div class="sticky">Working 2</div>
<div class="content">Content 2</div>
</div>
<div>
<div class="sticky">Working 3</div>
<div class="content">Content 3</div>
</div>
</div>
<div class="min notworking">
<div>
<div class="sticky">Not Working 1</div>
<div class="content">Content 1</div>
</div>
<div>
<div class="sticky">Not Working 2</div>
<div class="content">Content 2</div>
</div>
<div>
<div class="sticky">Not Working 3</div>
<div class="content">Content 2</div>
</div>
</div>
Any solutions or workarounds for this issue?