Here is a case where I have generated HTML and CSS code that includes classes for overflow, container height, and sticky positioning:
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.container {
max-height: 100px;
}
.sticky {
position: sticky;
top: 0;
} <div class="overflow-hidden">
<div class="overflow-x-auto">
<div class="container">
<div class="sticky">Sticky</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
</div>
</div>I am wondering if it can be achieved to use the "position: sticky" property without including any extra overflow settings for the "container" element. Removing the container does make it work, but unfortunately, I cannot remove it since it is automatically added by the plugin being used.
You can view a working example on StackBlitz