Webkit: Vertical writing-mode with margin on auto width column renders too large

[JoshuaLindquist]

Reduced Test Case: https://jsfiddle.net/wzvwn1zg/3/

I was using writing-mode: vertical-rl to create a vertical headline down the left side of the page. I created two columns using grid-template: auto / auto 1fr;. After the page was published, a viewer pointed out that it was broken in Safari; the headline was centered in the page with a skinny column down the right side.

In Chrome, Firefox, and Edge, the first column expands only enough to fit the width of the content (which I believe is the intended behavior of auto). In Webkit (I have not been able to personally test with an "official" copy of Safari on a Mac), there are huge margins being added to more-or-less center the content in the view port.

I have margin: 0 auto set on the first column; this is for smaller screen widths to center the heading at the top of the page. Removing either the margin or the writing-mode makes the problem disappear.

The workaround I am using is to add margin: 0 inside a media query.