Sticky button stickied left taking up whole width?

Hello I have a button that is stickied to the bottom left but taking up whole space for some reason. Commenting display: flex and flex-direction: column in .todo-list does not allow the plus button to stay stickied to the bottom of the container on the container resize

Button:

<div className="todo-list">            
    <button className="add-task-button" onClick={handleShowInput}>
        <img src={addIcon} alt="Add Task" className="add-icon" />
    </button>
</div>

Style:

.todo-list {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;


    p {
        margin: 0 0 0 2.4em;
    }

    ul {
        flex-grow: 1;
    }

    .add-task-button {
        position: sticky;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        height: auto;
        bottom: 1em;
        left: 1em;
        width: auto;

        .add-icon {
            width: 2.2em;
            
        }

        &:hover {
            transform: scale(1.1);
        }
    }
}

Please help as you are my only hope anymore

The width in your style can be given a fixed width