CSS Position Fixed Issue

<div class="content"> 
            <div class="entries"></div>
            <button class="entry-button"><img id="pen" src="icons/pen-to-square-solid.svg" alt=""></button>
        </div>

.content
{
    background-color: var(--white);
    min-width: 40rem;
    height: 44rem;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    overflow: hidden;
    overflow-y: scroll;
    position: relative;
}

.entry-button
{
    position: fixed;
    height: 3rem;
    width: 3rem;
    right: 0; 
    bottom: 0;
    margin: 5rem;
    border: 1px solid var(--light-blue);
    border-radius: .8rem;
    background-color: var(--light-blue);
    box-shadow: 0 5px 5px 0px rgba(0, 0, 0, .4);
}