要素を親コンテナにスティッキーにする

Question

次のレイアウトを作成しようとしています。

スクロールするとわかるように、1番目と3番目のアイテムの配置がコンテンツに合わせてスクロールされています。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にラップし、overflow：autoをそのdivに追加すると、私の例のようにスクロールバーがコンテナ全体で共有されないため、機能しません。

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>

Answer 2

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

.item：nth-​​child（2）の幅を100％にすることができます

Answer 3

主なアイデアは、絶対ラッパーを使用して固定の子を含めることです。

また、長いコンテンツにパディングを追加することを忘れないでください。

body {
  padding: 10px;
  background: #eee;
  display: flex;
  justify-content: center;
}
.parent {
  width: 100%;
  height: 100px;
  overflow-x: scroll;
  position: relative;
  border: 1px solid #000;
  background: #0f0;
}
.fix {
  position: fixed;
  background: rgba(255, 0, 0, .3);
  width: 100px;
  height: 100px;
  z-index: 2;
}
.fix-wrapper {
  position: absolute;
  top: 0;
}
.left {
  left: 0;
}
.right {
  right: 100px;
}
.content {
  height: 100%;
  width: 1000px;
  padding: 0 100px;
}

<div class="parent">
  <div class="fix-wrapper left">
    <div class="fix">Left</div>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque id nibh tortor id aliquet lectus proin. Viverra nam libero justo laoreet sit amet. Gravida cum sociis natoque penatibus et magnis dis parturient montes. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Aenean pharetra magna ac placerat. Pellentesque habitant morbi tristique senectus et netus. Sed odio morbi quis commodo odio aenean. Ac turpis egestas maecenas pharetra convallis posuere morbi. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Amet mattis vulputate enim nulla aliquet porttitor lacus. Curabitur vitae nunc sed velit. Cursus eget nunc scelerisque viverra. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Etiam non quam lacus suspendisse faucibus.
  </div>
  <div class="fix-wrapper right">
    <div class="fix">Right</div>
  </div>
</div>

Answer 4

私が理解しているように、あなたは左右のセクションを修正し、真ん中のアイテムをレスポンシブにする必要があります。問題への別のアプローチを検討する場合。これが私の解決策です。

#container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  height: 80vh;
}

.item1 {
  padding: 20px;
  background-color: #f90;
}

.item2 {
  flex: 1;
  padding: 20px;
}

.item3 {
  padding: 20px;
  background-color: #936;
}

<div id="container">
  <div class="item1">Left</div>
  <div class="item2">Middle</div>
  <div class="item3">Right</div>
</div>

position: sticky;必要に応じてアイテムに追加して、粘着性を持たせることができます。