flex css - clip element after certain height instead of wrapping

Question

The border represents static height and width.

I would like items 5 and 6 to remain on the second row and cut off items 3 and 6 instead of being wrapped a third time as shown. How do I achieve this with Flex?

To complement this issue, the width of the container (displayed with a border) can be resized by user action. When it's wide. For example, if it is wide enough to hold 4 elements, it will display all 4 elements in the first row and the remaining elements in the second row.

When we collapse the width of the container, I want it to have at most 2 rows, as shown in the image below.

I want the result to look like this for visualization:

[]

https://codepen.io/akeni/pen/LYBGOXB

<div id="example-element" class="transition-all" style="flex-wrap: wrap;">
        <div>Item One</div>
        <div>Item Two</div>
        <div>Item Three</div>
        <div>Item Four</div>
        <div>Item Five</div>
        <div>Item Six</div>
</div>


#example-element {
    border: 1px solid #c5c5c5;
    width: 300px;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#example-element > div {
    background-color: rgba(0,0,255,.2);
    border: 3px solid #00f;
    width: 60px;
    margin: 10px;
}

Answer 1

Referring to Flex containers as "elements" is a bit confusing. I personally prefer to call them "blabla-container", where "blabla" is the water I use in that part (eg: "nav-links-container"). But this is of course just a matter of taste. < /p>

Regarding this question, thank you for the new information, if you are open to suggestions, the easiest way is to use css-grid:

#example-element {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* or this way: 
    grid-template-columns: auto auto auto;
    */   
    overflow-x: hidden !important;
}

You can find more details here: MDN documentation, css-grid

Ah, one more detail, what you call "clipping" is what happens when the parent container is not large enough to hold a fixed size child container, so if after applying this change, You can't see it behaves the same as the second container picture, just make the parent component smaller (e.g. 200px)!