How to keep elements not flooding from Div Flex tag when using overflow-x?

Question

I've been trying to put elements inside a flex row div and I found out that I need to put overflow-x as "scroll" so it works fine on small screens. However, that did not fix the problem but made it worse

This is the HTML code:

    <div class="section">
        <div class="element"></div>
        <div class="element"></div>
        <!-- deleted all other elements
        to display the code better here-->
    </div>

Here is the CSS code:

.section{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: scroll;
    gap: 5px;
    width: 80%;
    height: 150px;
    border: 1px solid black;
    margin: 0 auto;
    padding: 0;
}

.element{
    width: 100px;
    height: 100px;
    background-color: gray;
    min-width: 100px;
}

As shown in the photo above that when I did inspect using Google Chrome, I found out that elements go out of the scrolling box. The photo only shows the first element but it's the same for all of them which is such a problem when there are other things on the same page.