CSS Multi Column - Safari/Chrome bug

Question

I was trying to make a Pinterest type layout using only CSS3 Multi Column code, which is as follows:

#columns {
    overflow: hidden;

    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto;

    -webkit-column-width: 350px;
    -moz-column-width: 350px;
    column-width: 350px;

    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;

    .article-content-block {

        display: block;

        padding: 1.5rem;
        margin-bottom: 1rem;
        box-shadow: 1.5px 1.5px 2px #e3e3e3;
        border: 1px solid $gray-lighter;
        background-color: white;
        @include transition(all .3s ease-in-out);

        &:hover {
            box-shadow: 3px 3px 6px #e3e3e3, 4px 4px 8px #e3e3e3 inset;
        }

        page-break-inside: avoid; /* For Firefox. */
        -webkit-column-break-inside: avoid; /* For Chrome & friends. */
        break-inside: avoid; /* For standard browsers like IE. :-) */

Well, in Safari, there is always an overflow coming on top of the second Column:

Safari with column code

To fix that I tried max-height, over-flow hidden etc. nothing worked. Then I used:

.article-content-block {
    display: inline-block;

Which seemed to fixed Safari (Version 10.1.1) perfectly. But guess what, this is what Chrome (Version 59.0.3071.104) looked like:

Chrome after code change

I can fix chrome fine with :

.article-content-block {
    display: block;

But this will break Safari back to what it was. I thought they were both WebKit browsers. And I used all the necessary prefixes also, so what am I doing wrong? So far no one seemed to be having any issue like this.