Html 如何将元素扩展到溢出的末尾

我希望动态地将元素平铺到内联容器中，所以我使用了

inline flex

，但是它溢出了，而不是扩展容器

我看到的是：

以下是我想看到的：

我不能使用常规的

flex

，因为这会添加不需要的换行符。
是否可以扩展溢出的跨度元素？如果没有，是否有一个内联flex的变通方法可以用来获得类似的结果？（有点离题：我该如何将flexbox居中？）

正文{
写入方式：垂直rl；
}
.部首{
字体大小：3.2米；
}
.中风{
文本对齐：居中；
书写方式：水平tb；
边缘底部：-1.5em；
}
.进入{
字号：1em；
显示：网格；
网格模板区域：“笔画汉字阅读”；
证明内容：开始；
}
日本汉字{
字号：2em；
边缘底部：-0.4em；
}
.变体{
显示：内联flex；
最大宽度：1米；
弯曲方向：立柱；
柔性包装：包装；
证明内容：中心；
//边框：纯色2px蓝色；
}
.变体{
宽度：1米；
字号：0.42em；
//边框：实心1px红色；
}
.阅读{
网格区域：读取；
}

16
【劔
剣
劍
劒
剱
釼
】
ケン (검)

つるぎ 

5.
【世
丗
卋
】
セイ・セ・ソウ (세)

よ 

㊔とし・ゆ・ゆき
4.
【丑
】
チュウ (축･추)

うし 

㊔ひろ
3.
【万
萬
】
マン・バン (만･묵)

よろず 

㊔かず・ま・ゆる

我想你在flex

列包装中遇到了一个已知的缺陷，谢谢你的链接！将它设置为
内联网格可以修复它，但是现在我不能将最后一行居中。我更改了内联flex
的编写模式：水平tb；
这样就不会出现这个缺陷，但是现在我得到了一个额外的新行我不想…