Flexbox goes offscreen on the left side

Question

I have a question about some HTML ans CSS techniques regarding flexboxes. I want my flexbox to shrink so that either everything is on screen or I get a scrollbar with which I can see all my data. However I get this result:

My chart goes offscreen on the left side. I cannot scroll to this side of the page anymore. It is off screen.

How can I make it so that if the page becomes to small for all the data that a scrollbar appears at the bottom that lets me scroll towards to right of the page instead of the leftside going offscreen and being unreachable?

Any help would be appreciated. Thank you for reading.

<div className={style.gantt} >
                    <div className={style.header}>
                        <div className={style.rowcontainer} >
                            {/* style={{ width: this.state.leftSideWidth + '%', minWidth: this.state.leftSideWidth + '%' }} */}
                            <div className={style.leftcontainer}>
                                <div></div>
                            </div>
                            <div className={style.rightcontainer}>
                                {this.state.globalDates.map(globalDate =>
                                    <div style={{ flexGrow: globalDate.colspan }}
                                        key={globalDate.key}>
                                        {globalDate.name}
                                    </div>
                                )}
                            </div>
                        </div>

                        <div className={style.rowcontainer}>
                            {/* style={{ width: this.state.leftSideWidth + '%', minWidth: this.state.leftSideWidth + '%' }} */}
                            <div className={style.leftcontainer} >
                                <div></div>
                                <div>Start date</div>
                                <div>End date</div>
                            </div>
                            <div className={style.rightcontainer}>
                                {this.state.specificDates.map(specificDate =>
                                    <div style={{ flexGrow: specificDate.colspan }}
                                        key={specificDate.key}>
                                        {specificDate.name}
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>

html

   .gantt {
    display: flex;
    flex-direction: column;
    padding-right: 5px;
}

.header {
    position: sticky;
    top: 0px;
    z-index: 1;
    background: #fff;
    padding-top: 2px;
}

.rowcontainer {
    display: flex;
    flex-direction: row;
}

.rowcontainer div {
    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow:
        1px 0 0 0 #888,
        0 1px 0 0 #888,
        1px 1px 0 0 #888,
        1px 1px 0 0 #888 inset,
        0 1px 0 0 #888 inset;
}

.rowcontainer div div {
    padding: 0.2em 0 0.2em 0;
    min-height: 2em;
    font-size: 12px;
}

.leftcontainer {
    flex: 0 0 25vw;
}

.leftcontainer div {
    flex: 1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leftcontainer>div:nth-child(1) {
    flex: 2;
}

.rightcontainer {
    flex: 1;
    min-width: 0;
}

.rightcontainer div {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

css

Answer 1

You should add overflow scroll. https://www.freecodecamp.org/news/css-overflow-explained-with-examples/