Currently, I am attempting to separate a child element from its parent that has overflow: hidden applied.
The main reason for restricting the dimensions of the parent is for a JavaScript workaround. I have experimented with positioning the child element, but it disrupts the page structure, and using position: fixed is ineffective in this scenario.
Here is the closest solution I have come up with so far:
<div style="position: relative;">
<div>
<!-- Parent container needs to have overflow: hidden with 0 width -->
<ul style="overflow: hidden; width: 0px; height: 0px;">
<li>
<!-- Child element needs to be visible -->
<div style="position: absolute; top: 0px; left: 0px;">
Tab Content
</div>
</li>
</ul>
</div>
</div>
If anyone knows of any CSS tricks or solutions to tackle this while maintaining a standard block display for the element, please share your insights.
Thank you, Simon