Comment afficher toujours la barre de défilement du div interne lorsque le div externe a une largeur plus petite

Question

Je me suis retrouvé dans un scénario où la div externe a une hauteur et une largeur définies alors que la div interne a une hauteur définie mais une largeur indéfinie. Comme si:

html:

<div id="parent"> 
    <div id="child"> 
    </div> 
</div 

et css:

#parent{ 
    width: 200px; 
    height: 200px; 
    overflow-x:scroll; 
    overflow-y:hidden 
} 
#child{ 
    width: 400px; 
    height: 200px; 
    overflow-x:hidden; 
    overflow-y:scroll; 
} 

Mais comme prévu, je peux voir la barre de défilement de la div intérieure que lorsqu'il a défilée à l'extrême droite.

Je souhaite toujours afficher les deux barres de défilement.

Aidez-moi à trouver une solution CSS ou une solution simple (non-jquery).

https://jsfiddle.net/n2tfe2wr/

Answer 1

Essayez avec ceci:

document.getElementById('child-size').style.width = document.getElementById('child-wrapper').scrollWidth+ 'px'; 
 
     document.getElementById('parent').addEventListener('scroll', function() { 
 
      document.getElementById('child-wrapper').style.marginLeft = document.getElementById('parent').scrollLeft + 'px'; 
 
      document.getElementById('child-wrapper').scrollLeft = document.getElementById('parent').scrollLeft; 
 
     })

#parent { 
 
    width: 200px; 
 
    height: 400px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    position: relative; 
 
} 
 

 
#child-wrapper { 
 
    width: 200px; 
 
    height: 200px; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    background-color: blue; 
 
} 
 

 
#child { 
 
    width: 400px; 
 
    color: white; 
 
} 
 

 
#child-size { 
 
    height: 1px; 
 
    opacity: 0; 
 
}

<div id="parent"> 
 
    <div id="child-size"></div> 
 
    <div id="child-wrapper"> 
 
     <div id="child"> 
 
      Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. 
 
      <br><br><br> 
 
      Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, 
 
      legimus senserit definiebas an eos. 
 

 
      <br><br><br> 
 
      Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, 
 
      eirmod consectetuer signiferumque eu per. 
 
      <br><br><br> 
 
      In usu latvine equidem dolores. 
 
      <br><br><br> 
 
      Quo no falli viris intellegam, ut fugit veritus placerat per. 
 
     </div> 
 
    </div> 
 

 
    <br><br> 
 
    Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. 
 
    <br><br><br> 
 
    Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, 
 
    legimus senserit definiebas an eos. 
 

 
    <br><br><br> 
 
    Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, 
 
    eirmod consectetuer signiferumque eu per. 
 
    <br><br><br> 
 
    In usu latvine equidem dolores. 
 
    <br><br><br> 
 
    Quo no falli viris intellegam, ut fugit veritus placerat per. 
 
</div>