CSS按内容优先级管理嵌套的flexbox宽度

我正在努力用flexbox包装

我有两个级别的列表：

1.
2.
3.
4.
5.
6.
7.
8.
9
A.
B
C
D
E
F
★

如果需要，可以修改HTML结构

基于包装宽度的渲染应符合以下规则：

• 模拟一个列表（所有项目之间的间距相同）
• 所有列表的第一项必须可见
• 但列表1的内容优先于列表2
• 项目列表中只能看到完整的项目

渲染示例：

• 1AX

• 123AX

• 123456789ax

• 123456789abcdefx

就我目前的成就而言，我错过了优先级换行（两个列表的宽度和元素数相同），而且两个列表中的项目之间的间距也不相同。

---

欢迎任何意见

您可以将

flex-shrink:0

添加到第一个列表中，这样它将永远不会收缩，您将拥有您的优先级规则，并将

min-width:0

添加到另一个列表中，以便在空间不足时收缩。您还应该允许

换行

，以便在元素溢出时看不到半个元素

使用新规则，最后一个元素将出现错误的空格

.wrapper{
显示器：flex；
flex-flow：行nowrap；
高度：37像素；
边界半径：5px；
背景色：#222；
证明内容：柔性端；
}
.名单{
显示器：flex；
柔性包装：包装；
}
/*加上这个*/
.list-1{
弹性收缩：0；
}
.list-2{
最小宽度：0；
溢出：隐藏；
}
/**/
.项目{
显示器：flex；
宽度：45px；
高度：26px；
对齐项目：居中；
证明内容：中心；
保证金：4px4x10px；
颜色：#fff；
背景色：#3d3D；
弹性收缩：0；/*这也是必须的，以避免项目收缩*/
}

1.
2.
3.
4.
5.
6.
7.
8.
9
A.
B
C
D
E
F
★

谢谢您的回答。它解决了部分问题，但我看不到半个项目。该列表应仅包含完整项目（添加了新规则）。@ali_o___kan已更新，但现在缺少距离规则。。。将尝试修复它。

溢出：隐藏

无法使用，因为在每个项目上，我们都会附加工具提示，这些提示也会被隐藏：/@ali_o__kan你可以用一种不溢出的黑客方式隐藏吗？如果它兼容IE11，肯定是：p

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