粘滞按钮粘在左侧占据整个宽度？

Question

您好，我有一个按钮粘在左下角，但由于某种原因占据了整个空间。注释显示：flex和flex-direction：.todo-list中的列不允许加号按钮在容器调整大小时保持粘在容器底部

按钮：

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

风格：

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

请帮忙，因为你是我唯一的希望了

Answer 1

你的样式中的宽度可以给定固定宽度