堆叠 CSS3 旋转的灵活盒子

Question

我正在寻找水平堆叠一些旋转的灵活框（即display: flex）。

问题在于，当我旋转它们时，即使我设置了 - 例如 - height: 1em，它们之间的间距也会很大。

我的猜测是，这是因为当一个盒子旋转时，它仍然占据未旋转的水平空间。

您将如何水平堆叠旋转的框并消除不需要的边距？

为了更好地理解整个问题，I've created a sample in jsFiddle 我把代码贴在这里：

HTML

<div id="container">
    <div class="inside">heyyyyyyyyyy</div>
    <div class="inside">heyyyyyyyyyy</div>
    <div class="inside">heyyyyyyyyyy</div>
    <div class="inside">heyyyyyyyyyy</div>
    <div class="inside">heyyyyyyyyyy</div>
</div>

CSS

#container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}

.inside {
    min-width: 0;
   transform: rotate(-90deg);   
}

Answer 1

您必须更新您的 HTML 和 CSS，如下所示。这里很难解释一切。 So Read this Article for More Explanation

HTML

<div id="container">
<div class="inside"><span class="test">heyyyyyyyyyy</span></div>
<div class="inside"><span class="test">heyyyyyyyyyy</span></div>
<div class="inside"><span class="test">heyyyyyyyyyy</span></div>
<div class="inside"><span class="test">heyyyyyyyyyy</span></div>
<div class="inside"><span class="test">heyyyyyyyyyy</span></div>
</div>

CSS

#container {
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
}

.inside {
display: inline-block;
overflow: hidden;
width: 1.5em;
line-height: 1.5;
min-width: 0;
transform: rotate(-90deg);   
}
.test
{
display: inline-block;
white-space: nowrap;
transform: rotate(-90deg);
-webkit-transform:rotate(-90deg);
}
.test:before
{
content: "";
float: left;
margin-top: 100%;
}

DEMO FIDDLE

编辑：

上述解决方案在 chrome 上运行良好，但在 FF 中却不行。在Matías Fidemraizer 对此进行了研究并提供了跨浏览器解决方案之后。非常感谢他。

CROSS BROWSER SOLUTION