Inner div element scroll via outer scrollbar

Question 1

Given the following html structure:

<div id="wrapper">
    <div id="top" class="bar"></div>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <div id="bottom" class="bar"></div>
</div>

You can use the following styles:

#wrapper {
    position:relative;
    height:200px;
}

#outer {
    background-color: red;
    overflow-y:auto;
    height: 200px;
}

#inner {
    color: white;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
    margin:50px;
    position:relative; z-index:1;
}

.bar {
    height:50px; 
    z-index:2;
    position:absolute; 
    background:red; 
    left:0; 
    right:20px;
}

#bottom {bottom:0;}
#top {top:0; }

Example

Example with psuedo selectors instead of the bar divs

Question 2

You can use the below:

Demo Fiddle

HTML

<body>
    <div id="outer"></div>
    <div id="inner">..content...</div>
</body>

CSS

body {
    position:relative;
    width:100%;
    margin:0;
    padding:0;
}
div {
    box-sizing:border-box;
}
#outer {
    border:50px solid red;
    padding: 50px;
    position:absolute;
    height:200px;
    right:17px;
    left:0;
}
#inner {
    color: white;
    font-weight: bold;
    height: 200px;
    padding:50px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: scroll;
    background-color: blue;
}