Html 如何确保特定子元素始终显示在父元素中，即使内容太大，无法容纳所有子元素？

我有一个带有display:flex的父元素，它包含一堆子元素。 问题是，有时有太多的孩子不适合父母

但是，我希望，不管怎样，如果子元素太多，父元素中最后可见的元素应该始终是类始终显示的元素

换句话说，如果我有一个父母可以抚养3个孩子，但实际上不止3个，我希望它看起来像这样：

我有没有办法强迫最后一个元素更。。。保持在右边，而不是被推出潜水舱？正如您在我的代码片段中看到的，黄色框正在显示，更多。。。不是。我想把黄色的盒子藏起来，还有更多。。。显示

.家长{ 显示器：flex； 宽度：365px； 高度：150像素； 背景色：阿巴巴； 对齐项目：居中； 溢出-x：滚动； } .孩子{ 最小宽度：100px； 高度：100px； 背景颜色：蓝色； 左边距：5px； 边框：1px纯黑； } 黄先生{ 背景颜色：黄色； } 布朗先生{ 背景颜色：棕色； } .粉红{ 背景颜色：粉红色； } 格林先生{ 背景颜色：绿色； } 更多

---

你想要这样的东西吗

p-家长{ 显示：内联flex； 对齐项目：居中； 职位：相对 } .家长{ 显示器：flex； 宽度：365px； 高度：150像素； 背景色：阿巴巴； 对齐项目：居中； 溢出-x：滚动； } .孩子{ 最小宽度：100px； 高度：100px； 背景颜色：蓝色； 左边距：5px； 边框：1px纯黑； } 黄先生{ 背景颜色：黄色； } 布朗先生{ 背景颜色：棕色； } .粉红{ 背景颜色：粉红色； } 格林先生{ 背景颜色：绿色； } .总是显示{ 位置：绝对位置； 右：0； 背景：白色； 填充：.5rem } 更多

---

对于子项的静态编号，您可以向黄色框下订单，如下所示

.家长{ 显示器：flex； 宽度：365px； 高度：150像素； 背景色：阿巴巴； 对齐项目：居中； 溢出-x：滚动； } .孩子{ 最小宽度：100px； 高度：100px； 背景颜色：蓝色； 左边距：5px； 边框：1px纯黑； } 黄先生{ 背景颜色：黄色； 顺序：5； } 布朗先生{ 背景颜色：棕色； } .粉红{ 背景颜色：粉红色； } 格林先生{ 背景颜色：绿色； } 更多 使用位置：粘性

.家长{ 显示器：flex； 宽度：365px； 高度：150像素； 背景色：阿巴巴； 对齐项目：居中； 溢出-x：滚动； } .孩子{ 最小宽度：100px； 高度：100px； 背景颜色：蓝色； 左边距：5px； 边框：1px纯黑； } 黄先生{ 背景颜色：黄色； } 布朗先生{ 背景颜色：棕色； } .粉红{ 背景颜色：粉红色； } 格林先生{ 背景颜色：绿色； } .总是显示{ 位置：粘性； 右：0； 背景色：阿巴巴； 高度：102px； 线高：102px； } .家长：第n个最后一个孩子2{ 位置：相对位置； } .家长：第n个最后一个孩子2：之后{ 内容：； 位置：绝对位置； z指数：1； 左：100%； 左边距：2倍； 宽度：100px； 排名：0； 底部：0； 背景：阿巴巴 } 更多 更多

---

我不明白，但正如我看到的，您希望链接显示更多和更少，为此，您可以使用jQuery ref。我更希望不必使用JavaScription。有没有一种简单的方法不显示更多。。。在第二个例子中？因为只有两个元素，我不想让它说更多…好东西！非常感谢。