Why inline-block property for fixed gap, fixed width columns introduces scrollbar

Question

I've read the questions about how it's basically impossible to have a fixed column height, fixed column width AND a fixed column gap (1, 2).

For example, in this JSFiddle, you can see the gaps changing when you change the width of the Result window.

However, I seem to have accomplished a fixed column height/width/gap by setting the 'display' CSS property of the column container to be 'inline-block':

#column {
    column-width: 360px;
    column-gap: 100px;
    -webkit-column-width: 360px;
    -webkit-column-gap: 100px;
    white-space: normal;
    display: inline-block;
    margin-bottom: 30px;
    height: 600px;
}

updated JSFiddle - gaps no longer change when changing window size, but now there's a huge vertical scrollbar! My hunch is this vertical space represents the space that the images would take up if they were in one giant column, because removing images actually shortens the amount of vertical space (lengths scrollbar).

1. Why does setting 'display' to 'inline-block' alter the column gap behavior?
2. Why does the inline-block property introduce so much vertical space?

I'm only seeing the extra long scrollbar in Chrome, and not in IE11.

Answer 1

1. The simple answer would be: you are changing the display property of a block element to behave like an inline-block, so the behavior is going to change with it. You can check out this answer for the behaviors of each display property.

2. The huge vertical bar is being created because the #column container height is trying to accommodate the elements within it, regardless of how those element are actually being displayed. Putting a float: left; for the #container div will fix this problem.