当外部div的宽度较小时，如何始终显示内部div的滚动条

Question

I have ended up in a scenario where the outer div has a definite height and width whereas the inner div has a definite height but an indefinite width. Like so:

html:

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

and css:

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

But as expected, I can see the scrollbar of inner div only when it has been scrolled to the extreme right.

I want to always show both scrollbars.

Please help me find a CSS solution or a plain js (non-jquery) solution.

https://jsfiddle.net/n2tfe2wr/

Answer 1

Try with this:

  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>