结合使用inline-flex和强制中断hack时,容器宽度计算不正确

My container's width needs to expand to the width of the content - I cannot set a fixed width, nor use full-width. For this reason I used inline-flex.

我正在使用flex break hack强制包装一定数量的物品。

问题在于容器的宽度设置得好像力破坏还没有出现。

我有2个项目,休息,然后有4个项目。容器的宽度应等于4个项目,但等于全部6个,留出2个项目的空白。

请帮忙。

Codepen: https://codepen.io/jakehills/pen/qBdBeej

<div class="container">
  <div class="i i1">i1</div>
  <div class="i i2">i2</div>
  <div class="break"></div>
  <div class="i i3">i3</div>
  <div class="i i4">i4</div>
  <div class="i i5">i5</div>
  <div class="i i6">i6</div>
</div>
.container {
  display: inline-flex;
  flex-wrap: wrap;
}

.break {
  flex-basis: 100%;
  width: 0px; 
  height: 0px; 
  overflow: hidden;
}
评论