CSS Columns breaks <figcaption>

Question

I have an article with only a little content paired with an image with a caption in a figure tag. The article has 2 columns declared with CSS3 columns. However the figcaption is being pulled out from within the figure in an attempt to make the columns even.

CSS

article {
    -webkit-columns: 325px 2;
       -moz-columns: 325px 2;
            columns: 325px 2;
    -webkit-column-gap: 40px;
       -moz-column-gap: 40px;
            column-gap: 40px;
}

figure img {
    width: 100%;
    margin: 0;
}

figure {
    border: 0.5px solid #d7d7d7;
    margin-bottom: 30px;
    margin-left: 4px;
}

figcaption {
    padding: 11px 20px;
    font-family: 'Montserrat';
    font-size: 12px;
    /* IE 8 */
    ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    /* IE 5-7 */
    filter: alpha(opacity=80);
    /* Netscape */
    moz-opacity: 0.8;
    /* Safari 1.x */
    khtml-opacity: 0.8;
    /* Good browsers */
    opacity: 0.8;
    border-top: 0.5px solid #d7d7d7;
    -webkit-box-shadow: 0 1px 5px 2px #d7d7d7;
       -moz-box-shadow: 0 1px 5px 2px #d7d7d7;
            box-shadow: 0 1px 5px 2px #d7d7d7;
}

HTML

<article>
    <figure>
        <img width="574" height="350" src="myimage.jpg">
        <figcaption>CAPTION: ipsum dolor sit amet, consectetur adipiscing elitus Vivamus sed porttitor nisl, vel condimentum.</figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet, proin consectetur adipiscing elit vesti bulum feugiat dapibus erat, vel vulputate purus placera.</p>
</article>

Research lead me to break-inside, and specifying break-inside rules solves the issue of the figcaption being extracted from the figure, however the box-shadow stays in the other column, which is even worse.

article figure {
    -webkit-column-break-inside: avoid;
              page-break-inside: avoid;
                   break-inside: avoid;
}

I've confirmed this issue in Chrome and Safari, while Firefox is ignoring the break-inside rules completely and gives the result of the first screenshot, even if the figcaption is also included in the break-avoid rules.

The article may have any number of paragraphs, and when there is enough text to match the height of the image it displays correctly

How can I get the entire figcaption element to stay in the one column, cross-browser, including the box-shadow? Or are CSS3 columns too new for there to be a fix?

Answer 1

Solved by adding an inline-block display property to the figure

figure {
    border: 0.5px solid #d7d7d7;
    margin-bottom: 30px;
    margin-left: 4px;
    display: inline-block;
}

This solved the shadow falling into the next column on Chrome and Safari, while IE and Firefox were ignoring the break-inside rules unless this declaration was made.