Ширина контейнера неправильно рассчитана при использовании inline-flex с принудительным взломом

Question

! Flex - это требование, так как в моем проекте эти элементы должны быть переупорядочены в разных точках останова.

Ширина моего контейнера должна быть расширена до ширины содержимого - я не могу установить фиксированную ширину или использовать полную -width. По этой причине я использовал inline-flex.

. Я использую хакер Flex Break для принудительного переноса после определенного количества элементов.

Проблема в том, что ширина контейнеров устанавливается так, как если бы Силового разрыва даже нет.

У меня есть 2 предмета, разрыв, затем 4 предмета. Ширина контейнера должна быть равна 4 элементам, но равна всем 6, оставляя пробел в 2 элемента.

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

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

Править Март 2020: Решение не найдено - мне пришлось построить это по-другому. Если вы найдете исправление, отправьте свое решение, и я обновлю этот вопрос для будущих пользователей.

Answer 1

Вы должны обновить свой стиль:

.container {
  display: inline-block;
}

.break {
    height: 2px;
    overflow: hidden;
    background-color: red;
    display: block;
}



/* JUST FOR VISIBILITY, NOT IMPORTANT FOR FUNCTIONING */
body, html {
  width: 100%;
  height: 100%;
  margin:0;
}

.container {
  border: solid 2px black;
  box-sizing: border-box;
  margin: 20px;
}

.i {
  box-sizing: border-box;
  padding: 20px;
  display: inline-block;
}

.i1 { background: #fce3b6;}
.i2 { background: #c4e378;}
.i3 { background: #c9eeff;}
.i4 { background: #feab4d;}
.i5 { background: #e5b4ad;}
.i6 { background: #519600;}

Answer 2

Flex здесь не нужен. Я бы рекомендовал делать это с помощью inline-block / float.

https://codepen.io/vovchisko/pen/jOPENab

.container {
  display: inline-block;
}

.break {
  clear: both;
  height: 2px;
  background: red;
}

.i {
  float: left;
}