Here is a scenario for consideration:
http://codepen.io/anon/pen/NPGKPq
Is there a CSS approach, without incorporating Javascript, to display the full width of the blue div? Essentially, rather than having a horizontal scrollbar, only show a vertical scrollbar while allowing the blue div to extend beyond the confines of the area?
I have tried absolutely positioning the blue div over the container, but then it doesn't scroll alongside the container.
I believe I could find a workaround by using a parent container with full width and a transparent background, but I suspect I might be overlooking something simple.
Any suggestions or insights would be greatly appreciated!
For reference, here is a backup of the codepen sample:
<div id="container">
<div class="normal_div">
test1
</div>
<div id="extension_div">
Wide test
</div>
<div class="normal_div">
test2
</div>
<div class="normal_div">
test3
</div>
</div>
#extension_div
{
display: inline-block;
position: relative;
left: -10px;
z-index: 20;
background-color: blue;
width: 150px;
}
#container
{
position: static;
display: block;
width: 100px;
border: 1px solid black;
height: 200px;
overflow-y: scroll;
overflow-x: visible;
}
.normal_div
{
position: relative;
display: block;
height: 80px;
background-color: red;
border: 1px solid blue;
}