overflow:scroll doesn't fill div / changes div size - html

Question

I have this code:
<div style="position:absolute;left:0px;top:0px;width:17px;height:395px;background-color:white;border:1px solid black;">
<div style="position:inherit;;width:inherit;height:inherit;overflow:scroll;"></div>
<button style="position:absolute;left:0px;top:139px;width:17px;height:73px;background-color:white;border:1px solid black;"></button>
</div>
If you look at the generated HTML, you will see that there is a white square that is not filled by the scrollbar on the bottom. How does this happen? When I inspect the element, the overflow:scroll div does not have 395px, but 378px. When I correct it to 395px the scrollbar will fill the parent div visually, but there will be an overflow.
What is happening here?

Answer 1

This is simply the space for the horizontal scrollbar. You can make it visible by increasing your elements width:
.bar {
position: absolute;
left: 0px;
top: 0px;
width: 80px;
height: 395px;
background-color: white;
border: 1px solid black;
}
.inner {
position: inherit;
width: inherit;
height: inherit;
overflow: scroll;
}
button {
position: absolute;
left: 0px;
top: 139px;
width: 17px;
height: 73px;
background-color: white;
border: 1px solid black;
}
<div class="bar">
<div class="inner"></div>
<button></button>
</div>
You can avoid that space by using overflow-y instead of the more general overflow:
.bar {
position: absolute;
left: 0px;
top: 0px;
width: 17px;
height: 395px;
background-color: white;
border: 1px solid black;
}
.inner {
position: inherit;
width: inherit;
height: inherit;
overflow-y: scroll;
}
button {
position: absolute;
left: 0px;
top: 139px;
width: 17px;
height: 73px;
background-color: white;
border: 1px solid black;
}
<div class="bar">
<div class="inner"></div>
<button></button>
</div>
In general it's a good idea to seperate styles from markup. It's easier to avoid problems if not using inline styles.