粘性按钮固定于左侧却占满整个宽度的问题求助

救命！我遇到个超头疼的问题：本来想让这个添加任务的按钮粘在.todo-list容器的左下角，结果它现在莫名其妙占满了整个容器宽度。更糟的是，如果把.todo-list里的display: flex和flex-direction: column注释掉，按钮倒是不会乱占宽度了，但容器缩放的时候，按钮就没法保持粘在容器底部的状态了，我实在没辙了😭

按钮结构代码 #

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

对应的CSS样式代码 #

.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);
        }
    }
}

备注：内容来源于stack exchange，提问作者Amadeus