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

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

• javascript
• css
• reactjs
• sass
• styling

Share Improve this question Follow edited Nov 20, 2024 at 6:33 Amadeus asked Nov 20, 2024 at 6:22 AmadeusAmadeus 44255 silver badges1818 bronze badges 1

• 1 you didn't show the css for the container. But I am guessing it has flex display with flex-direction as column. So every child item will have entire width. If you want to show something else beside the button just add it in same div. – Anubhav Sharma Commented Nov 20, 2024 at 6:26

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The width in your style can be given a fixed width