flex css - élément de clip après une certaine hauteur au lieu de l'envelopper

Question

Les bordures représentent la hauteur et la largeur statiques.

J'aimerais que les articles 5 et 6 restent sur la deuxième rangée et découpent les articles 3 et 6 au lieu d'être emballés une troisième fois comme indiqué. Comment y parvenir avec Flex ?

Pour compléter ce problème, la largeur du conteneur (affichée avec une bordure) peut être redimensionnée par l'action de l'utilisateur. Quand c'est large. Par exemple, s'il est suffisamment large pour contenir 4 éléments, il affichera les 4 éléments dans la première ligne et les éléments restants dans la deuxième ligne.

Lorsque nous réduisons la largeur du conteneur, je souhaite qu'il comporte au plus 2 lignes, comme indiqué dans l'image ci-dessous.

Je veux que le résultat ressemble à ceci pour la visualisation :

[]

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

Se référer aux conteneurs Flex en tant qu'« éléments » est un peu déroutant. Personnellement, je préfère les appeler "blabla-container", où "blabla" est l'eau que j'utilise dans cette partie (par exemple : "nav-links-container". Mais bien sûr, c'est juste une question de goût. < /p>

Concernant cette question, merci pour les nouvelles informations, si vous êtes ouvert aux suggestions, le plus simple est d'utiliser 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;
}

Vous pouvez trouver plus de détails ici : Documentation MDN, css-grid

Ah, encore un détail, ce que vous appelez "clipping" est ce qui se produit lorsque le conteneur parent n'est pas assez grand pour contenir un conteneur enfant de taille fixe, donc si après avoir appliqué ce changement vous voyez Au lieu d'agir de la même manière que le deuxième conteneur image, réduisez simplement le composant parent (par exemple 200 px) !