css - Container of vertical writing mode elements uses their height to compute the container's width -

I am trying to achieve is a horizontally scrolling images with vertical writing mode captions. Mask looks like this:

  & lt; Number & gt; & Lt; Div class = "image" & gt; & Lt; / Div & gt; & Lt; Figurecaption & gt; & Lt; P class = "vertical" & gt; This is the caption text. & Lt; / P & gt; & Lt; / Figurecaption & gt; & Lt; / Statistic & gt;  

When I try to create vertical writing mode to figure captions, use containers () still has the original width of the caption to calculate its width (height in vertical) Seem to be So there is a difference between the figures.

I can specify a clear width of the container to end the interval. I'm wondering what better way is that the container can fit its width in its content.

Here is Jesfild:

Here is the minimum version:

< P> It seems that it did not like the 'Inline Block' display!

This is my browser:

  p.vertical {-webkit-writing-mode: vertical-rl; }