Displayed below is a layout with two nested divs, both featuring automatic vertical scrolling.
Is there a CSS technique available to show the inner scrollbar while maintaining the inner div at 100% width?
https://i.stack.imgur.com/HSKHH.png
div {
background: rgba(0, 0, 0, 0.2);
width: 200px;
height: 400px;
overflow-y: auto
}
#outer { height: 400px; }
#inner { height: 200px; }
button { float: right; color: #F60}<button onclick="document.getElementById('outerContent').innerHTML='smaller content does not need to scroll #inner should still be 100% width of #outer'">TRY WITH SMALLER CONTENT</button>
<div id='outer'>
<span id='outerContent'>Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which
causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which
causes scroll</span>
<div id='inner'>INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV
ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR
</div>
</div>