Faire en sorte que l'élément reste sur la droite même lorsque vous faites défiler horizontalement

Question

Il y a un élément de "couleur rouge" qui doit toujours rester sur la droite. Avec à droite, je veux dire à la droite de l'élément parent lime colored border. "Normalement" définir le parent à position: relative; et l'enfant à position: absolute; right: 0; fait l'affaire mais pas dans ce cas.

Quelqu'un me dit pourquoi et comment le réparer?

.grid { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
.grid div[class*='col-'] { 
 
    position: relative; 
 
    padding: 15px; 
 
    flex-grow: 0.33; 
 
    flex-shrink: 1; 
 
    flex-basis: 0%; 
 
    border: solid 1px lime; 
 
} 
 

 
.resize-bar { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 5px; 
 
    background-color: red; 
 
    opacity: 0.8; 
 
} 
 

 
[data-resizable] { 
 
    min-width: 5px; 
 
    overflow-x: scroll; 
 
}

<h2>Hover on "orange" and scroll horizontally</h2> 
 
<div class="grid"> 
 
    <div class="col-1-4" data-resizable="true"> 
 
     <div style="width:300px;height:40px;background-color:orange;"></div> 
 
     <span class="resize-bar"></span> 
 
    </div> 
 
</div>

Si possible non javascript solution sera préférée. Je vous remercie.

JsFiddle here

Answer 1

fiddle

contenu wrap dans un autre div, qui même taille de col-

.grid { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
.grid div[class*='col-'] { 
 
    position: relative; 
 
    flex-grow: 0.33; 
 
    flex-shrink: 1; 
 
    flex-basis: 0%; 
 
    overflow-x: hidden; 
 
    border: solid 1px lime; 
 
} 
 

 
.resize-bar { 
 
    position: absolute; 
 
    display: block; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 5px; 
 
    background-color: red; 
 
    opacity: 0.8; 
 
} 
 

 
.box { 
 
    width: 100%; 
 
    height: 100%; 
 
    min-width: 5px; 
 
    overflow-x: scroll; 
 
}

<h2>Hover on "orange" and scroll horizontally</h2> 
 
<div class="grid"> 
 
    <div class="col-1-4" data-resizable="true"> 
 
    <div class="box"> 
 
     <div style="width:370px;height:40px;background-color:orange;"> 
 

 
     </div> 
 
    </div> 
 
    <span class="resize-bar"></span> 
 
    </div> 
 
     
 
    
 
</div>