Hey fellow developers! I'm facing a strange issue where an absolutely positioned div is not staying within its parent's boundaries and is overflowing instead.
Here's a snippet of the code:
<button className='unClear action-btn' onBlur={closeDrop} onClick={handleEdit}>
action
{!dropDown ? <span className='icon small-icon'><AiFillCaretDown /></span> :<span className='icon small-icon'><AiFillCaretUp /></span> }
{dropDown && <ul >
<li>Update Invoice</li>
<li>Edit Invoice</li>
<li>Invoice Info</li>
<li>Print Receipt</li>
<li>Delete Invoice</li>
</ul> }
</button>)
And here's the CSS:
.action-btn{
height: 2.5rem;
width; 8rem;
position: relative;
ul{
height: auto;
position: absolute;
left: 0;
top: 2.75rem;
li{
height: 2.4rem;
width: 100%;enter image description here
}
}
It's weird because this same code worked fine in my previous project, but it's misbehaving here. Check out this screenshot https://i.sstatic.net/8EcVp.jpg.