Adjusting a <div> width taking a scrollbar into account

Question

I have two div elements; one of them with a scrollbar on the side:

+-------------+ ?
|  div A      | ?
+-------------+ ?
|             |^|
|             | |
|             | |
|   div B     |=|
|             | |
+-------------|v|

I want div A to be exactly as wide as div B minus the width of its scrollbar. The scrollbar is always there (by explicit overflow: scroll). OTOH div A is of fixed height and does not need scrolling. I want the client areas of div A and div B to be aligned.

I could probably make an artificial scrollbar control using JS. If possible, I'd prefer a CSS-based, native-looking solution, though.

I could put a separate piece of padding where the ? on the picture are, if I somehow knew what the platform-dependent width of the scrollbar is.

Is there a way to achieve this, at least in modern browsers?

Answer 1

Another possibility uses only css, and it is very reliable.

On the top div, create a inner div to hold the content, and a hidden pseudo :after element to generate the scrollbar's width. I've used a display: table aligment to keep inline, but other techniques will do as well:

Works like a charm: http://jsfiddle.net/4gu5mkzy/1/

#top {
    width: 100%;
    height: 100px;
    display: table;
}

#top:after {
    display: table-cell;
    content: "";
    overflow-y: scroll;
    visibility: hidden;
}

.inner {
    display: table-cell;
    background: yellow;
}

<div id="top">
    <div class="inner"><!-- content --></div>
</div>