堆叠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

编辑：

上述解决方案在铬上工作正常但在FF中没有。在Matías Fidemraizer对此进行研究并提供跨浏览器解决方案之后。非常感谢你。

CROSS BROWSER SOLUTION