html - 使元素粘在它们的父容器上

Question

我正在尝试创建以下布局:

如您所见，当我滚动时，第 1 项和第 3 项的对齐方式已随内容滚动。我需要一种方法让第一个和第三个元素保持粘性。我还需要此解决方案在容器随屏幕尺寸缩放时做出响应。

#container {
  height: 300px;
  width: 50%;
  position: relative;
  overflow: auto;
  border: solid 1px black;
}

.item {
  height: 500px;
  width: 100px;
  z-index: 5;
  position: absolute;
  background-color: red;
}

.item:nth-child(2) {
  width: 800px;
  z-index: 2;
  background-color: green;
}

.item:nth-child(3) {
  right: 0;
}

<div id="container">
  <div class="item">&nbsp</div>
  <div class="item">&nbsp</div>
  <div class="item">&nbsp</div>
</div>

我实际构建的是什么这是一个普遍的问题。我试图解决的实际问题是自定义 HTML 表格的问题。左右元素(红色部分)将成为静态(粘性)列的容器。话虽如此，我需要问题的约束保持不变。将 item:nth-child(2) 的宽度更改为 100% 将不起作用。将 item:nth-child(2) 内的内容包装在另一个 div 中并向该 div 添加 overflow: auto 将不起作用，因为滚动条将不会像我的示例中那样在整个容器之间共享。

Answer 1

你可以像下面这样尝试:

#container {
  height: 300px;
  display:flex; /* added */
  overflow: auto;
  border: solid 1px black;
}

.item {
  height: 500px;
  width: 100px;
  background-color: red;
  flex-shrink:0; /* added */
}

.item:nth-child(2) {
  width: 800px;
  background-color: green;
}

.item:nth-child(1) {
  left: 0;
  top:0;
  position: sticky;
}
.item:nth-child(3) {
  right: 0;
  top:0;
  margin-left:auto; /* this is important*/
  position: sticky;
}

<div id="container">
  <div class="item">&nbsp</div>
  <div class="item">&nbsp</div>
  <div class="item">&nbsp</div>
</div>