分页组件在手机上顶掉一行

窄屏上，分页那一行右边多出来一个空白块，页码被挤到第二行。宽度明明够。

检查元素发现是 flex 容器里有三个子项：左侧统计文字、中间页码、右侧跳转输入框。窗口变窄时文字先被压，但那个输入框写了 width: 120px 且 flex-shrink: 0（我为了防止它被压扁加的）。于是它寸步不让，把总宽度顶超，容器换行。

flex 的默认是 flex-shrink: 1，但"不允许压缩"的项会先占住空间，剩下的才轮到别人分。我加那个 0 的初衷是对的，只是没算上"屏幕可能比 120 + 页码还窄"。

三种处理，我最后混着用：

小屏隐藏次要项。统计文字在手机上没意义，用媒体查询 display: none 掉，空间立刻够。

允许换行，但让它换得整齐。flex-wrap: wrap 加上给每个子项设 flex-basis，换行之后是有意设计而不是溢出。

去掉写死的宽度，用 min-width 表达"至少这么宽"。这样它可以在极端窄屏下让步。

还有一条跟这个 bug 无关但同一天发现的：flex 子项默认 min-width: auto，意思是"不许小于内容固有宽度"。所以当子项里有一段长文本或一个宽表格时，加 flex-shrink: 1 也不会缩，看起来像"容器不听话"。解法是给它 min-width: 0。这个开关我第二次遇到是在另一个场景（横向滚动容器里第一个元素撑满整行），两次都是查了很久。

现在写响应式列表，我会先把"哪一项在窄屏下可以消失"想清楚，而不是等到溢出再补媒体查询。