Flex CSS：固定高度下元素裁剪而非换行的实现方案咨询

边框代表容器的固定宽高。我希望第五项和第六项留在第二行，同时让第三项和第六项被裁剪，而非如图中所示那样进行第三次换行。如何通过Flex实现该效果？

补充说明：带有边框的容器宽度可由用户调整。当容器足够宽时，例如能容纳4个元素，就将这4个元素放在第一行，剩余元素放在第二行。当我们缩小容器宽度时，我希望布局最多显示两行，效果如下方图片所示：

原始代码 #

<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;
}

解决方案 #

只需对CSS做以下调整，即可实现最多两行、超出部分裁剪的效果：

#example-element {
    border: 1px solid #c5c5c5;
    width: 300px;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    overflow: hidden; /* 裁剪超出容器的内容 */
    align-content: flex-start; /* 行顶部对齐，避免行间距导致额外换行 */
}

#example-element > div {
    background-color: rgba(0,0,255,.2);
    border: 3px solid #00f;
    width: 60px;
    margin: 10px;
    flex-shrink: 0; /* 禁止元素收缩，保持固定宽度 */
}

关键调整说明：

• overflow: hidden：容器范围内放不下的元素部分会被直接裁剪，符合需求中第三项、第六项被裁剪的效果
• align-content: flex-start：默认值stretch会让行拉伸填充容器高度，改为flex-start后两行元素紧贴顶部排列，避免因容器高度导致元素被迫换行到第三行
• flex-shrink: 0：确保子元素不会因为容器宽度缩小而被压缩，保持设定的固定宽度，保证布局逻辑稳定

内容的提问来源于stack exchange，提问作者user3559233