我正在尝试创建某种柔性容器的通用组件。该组件由容器及其连续的子组件组成。
如果一行中的孩子太多，没有足够空间的孩子会去第二行。它可以使用 Flexbox 轻松实现，但我也希望能够在元素之间设置装订线。一行的第一个和最后一个元素不应分别具有左边距和右边距。
我使用负边距技术来做到这一点，但这里的问题是，如果容器太大，右边距可能会引发溢出问题。我可以通过添加切断负边距来解决这个问题overflow: hidden，但它会引发容器内项目溢出的问题（下拉菜单等）。
所以现在我正在寻找银弹，可以满足这个要求的实现：
overflow: hidden这是我对这个问题的解决方案： https://jsbin.com/gabumax
这里是示例中的代码：
.container {
overflow: hidden;
}
.wrapper {
margin: -10px;
display: flex;
flex-wrap: wrap;
}
.item {
flex: 0 0 auto;
padding: 10px;
background-color: red;
margin: 10px;
}<div class="container">
<div class="wrapper">
<div class="item">Width of items can vary</div>
<div class="item">This example works</div>
<div class="item">But there is a problem</div>
<div class="item">Dye to overlow:hidden</div>
<div class="item">It is impossible to place here</div>
<div class="item">Overflowing …