CSS управляет шириной вложенного flexbox по приоритету

Question

Я боролся с флексбоксом.

У меня есть 2 списка уровней:

<div class="wrapper">
  <div class="list list-1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
  <div class="list list-2">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
    <div class="item">F</div>
  </div>
  <div class="item">&#9733;</div>
</div>

Структура HTML может быть изменена, если это необходимо.

База на визуализации ширины обертки должна соответствовать следующим правилам:

• имитировать один список (одинаковое поле между всеми элементами);
• Первый элемент всех списков должен быть видимым;
• но содержимое списка 1 имеет приоритет над списком 2;
• элементы, только полный элемент может быть виден в списке;

Пример рендеринга:

• 1 A X
• 1 2 3 A X
• 1 2 3 4 5 6 7 8 9 A X
• 1 2 3 4 5 6 7 8 9 A B C D E F X

С моим текущим достижением я пропускаю перенос приоритетов (оба списка получают одинаковую ширину и количество элементов), и пробелы между элементами в обоих списках не одинаковы.

.wrapper {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 37px;
  border-radius: 5px;
  background-color: #222;
  justify-content: flex-end;
}

.list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.list div:not(:first-child) {
    margin-left: 2px;
}

.item {
  display: flex;
  width: 45px;
  height: 26px;
  align-items: center;
  justify-content: center;
  margin: 4px 4px 10px;
  color: #fff;
  background-color: #3d3d3d;
}

Любая идея приветствуется!

Answer 1

Вы можете добавить flex-shrink:0 в первый список, чтобы он никогда не уменьшался, и у вас будет правило приоритета, и добавьте min-width:0 в другой список, чтобы он мог сжиматься, когда недостаточно места. Вы также должны разрешить wrap, чтобы не видеть половину элемента при его переполнении.

С вашим новым правилом будет неправильный пробел с последним элементом.

.wrapper {
  display: flex;
  flex-flow: row nowrap;
  height: 37px;
  border-radius: 5px;
  background-color: #222;
  justify-content: flex-end;
}

.list {
  display: flex;
  flex-wrap:wrap;
  
}

/*added this*/
.list-1 {
  flex-shrink:0;
}
.list-2 {
  min-width:0;
  overflow:hidden;
}
/**/
.item {
  display: flex;
  width: 45px;
  height: 26px;
  align-items: center;
  justify-content: center;
  margin: 4px 4px 10px;
  color: #fff;
  background-color: #3d3d3d;
  flex-shrink:0; /*this is also mandatory to avoid the item to shrink*/
}

<div class="wrapper">
  <div class="list list-1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
  <div class="list list-2">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
    <div class="item">F</div>
  </div>
  <div class="item">&#9733;</div>
</div>

Без overlfow здесь есть способ скрыть ненужный элемент:

.wrapper {
  display: flex;
  flex-flow: row nowrap;
  height: 37px;
  border-radius: 5px;
  background-color: #222;
  justify-content: flex-end;
}

.list {
  display: flex;
  flex-wrap:wrap;
  position:relative;
  align-self: flex-start; 
}
.list::after {
  content:"";
  position:absolute;
  bottom:0;
  top:37px;
  left:0;
  right:0;
  background:#fff;
}

/*added this*/
.list-1 {
  flex-shrink:0;
}
.list-2 {
  min-width:0;
}
/**/
.item {
  display: flex;
  width: 45px;
  height: 26px;
  align-items: center;
  justify-content: center;
  margin: 4px 4px 10px;
  color: #fff;
  background-color: #3d3d3d;
  flex-shrink:0; /*this is also mandatory to avoid the item to shrink*/
}

<div class="wrapper">
  <div class="list list-1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
  <div class="list list-2">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
    <div class="item">F</div>
  </div>
  <div class="item">&#9733;</div>
</div>