Rendre les éléments collants à leur conteneur parent

Question

J'essaie de créer la mise en page suivante :

Comme vous pouvez le voir lorsque je défile, l'alignement des 1er et 3ème éléments a défilé avec le contenu. J'ai besoin d'un moyen pour que les premier et troisième éléments restent collés sur leurs côtés respectifs. J'ai également besoin que cette solution soit réactive lorsque le conteneur évolue avec la taille de l'écran.

#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>

Ce que je construis actuellement Il s'agit d'un problème généralisé. Le problème réel que j'essaie de résoudre est celui d'un tableau HTML personnalisé. Les éléments de gauche et de droite (sections rouges) vont être des conteneurs pour les colonnes statiques (collantes). Cela étant dit, j'ai besoin que les contraintes du problème restent les mêmes. Changer la largeur de l'item:nth-child(2) à 100% ne fonctionnera pas. Envelopper le contenu à l'intérieur de l'item:nth-child(2) dans une autre div et ajouter overflow: auto à cette div ne fonctionnera pas car alors la barre de défilement ne sera pas partagée entre l'ensemble du conteneur comme c'est le cas dans mon exemple.

Answer 1

Vous pouvez essayer comme ci-dessous :

#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;
}

Vous pouvez faire en sorte que la largeur de .item:nth-child(2) soit de 100 %

Answer 3

L'idée principale est d'utiliser un wrapper absolu pour contenir un enfant fixe.

N'oubliez pas non plus d'ajouter du rembourrage dans le contenu long.

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

Si je comprends bien, vous voulez que les sections gauche et droite soient fixes et que l'élément du milieu soit réactif. Si vous envisagez une approche différente du problème. Voici ma solution.

#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>

Vous pouvez ajouter le position: sticky;au besoin à n'importe quel élément pour le rendre collant.