css - 粘性子 div 相对于父 div 水平滚动

Question

我在父 div 内部粘附子 div 时遇到一些问题。父 div 有两个子 div。 child2 的高度超出父 div 的高度。所以我为父 div 添加了滚动条。现在的问题是我想让子 1 div 成为粘性的，当我让子 1 成为粘性的时，这个 div 的宽度超出了父 div。 child1 应该进入父 div 并能够水平滚动父 div。

.parent {
  width:250px;
  height:250px;
  background-color:#CCCCCC;
  position:relative;
  overflow:scroll;
}

.child1 {
  width:500px;
  height:50px;
  background-color:#4285F4;
  position:fixed;

}
.child2 {
  height:500px;
  width: 600px;

}

<div class="parent">
   <div class="child1"></div>
    <div class="child2"></div>
</div>

如有任何帮助，我们将不胜感激。

更新 确切的问题是，当我将 child2 的宽度设置为 500px 时，我可以水平滚动。但是 child1 正在移出父 div 并且正在显示内容。

Answer 1

你为什么不给你的 child1 定义一个适合父级的宽度，这样你仍然可以使用 fixed 作为定位？

参见 DEMO