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

Question

我有一个带有 display: flex 的父元素，其中包含一堆子元素。问题是，有时子级太多而无法适本地容纳在父级中。

但是，无论如何，如果有太多子元素，父元素中最后可见的元素应该始终是类为 always-show 的元素。

换句话说，如果我有一个 parent 可以抚养 3 个 child ，但实际上不止三个，我希望它看起来像这样:

有什么方法可以强制最后一个元素(More...)保持在右侧而不被推出 div？正如您在我的代码片段中看到的那样，黄色框正在显示，而 More... 则没有。我希望隐藏黄色框并显示 More...

.parent {
  display: flex;
  width: 365px;
  height: 150px;
  background-color: #ababab;
  align-items: center;
  overflow-x: scroll;
}

.child {
  min-width: 100px;
  height: 100px;
  background-color: blue;
  margin-left: 5px;
  border: 1px solid black;
}

.yellow {
  background-color: yellow;
}
.brown {
  background-color: brown;
}
.pink{
  background-color: pink;
}
.green {
  background-color: green;
}

<div class="parent">
  <div class="child brown"></div>
  <div class="child pink"></div>
  <div class="child green"></div>
  <div class="child yellow"></div>
  <div class="always-show"><a>More...</a></div>
</div>

Answer 1

使用position:sticky

.parent {
  display: flex;
  width: 365px;
  height: 150px;
  background-color: #ababab;
  align-items: center;
  overflow-x: scroll;
}

.child {
  min-width: 100px;
  height: 100px;
  background-color: blue;
  margin-left: 5px;
  border: 1px solid black;
}

.yellow {
  background-color: yellow;
}
.brown {
  background-color: brown;
}

.pink{
  background-color: pink;
}
.green {
  background-color: green;
}
.always-show {
  position:sticky;
  right:0;
  background-color: #ababab;
  height: 102px;
  line-height:102px;
}

.parent :nth-last-child(2) {
  position:relative;
}
.parent :nth-last-child(2):after {
  content:"";
  position:absolute;
  z-index:1;
  left:100%;
  margin-left:2px;
  width:100px;
  top:0;
  bottom:0;
  background:#ababab
}

<div class="parent">
  <div class="child brown"></div>
  <div class="child pink"></div>
  <div class="child green"></div>
  <div class="child yellow"></div>
  <div class="always-show"><a>More...</a></div>
</div>
<div class="parent">
  <div class="child brown"></div>
  <div class="child pink"></div>
  <div class="always-show"><a>More...</a></div>
</div>