如何使柔性柱容器收缩到其内容

Question

我必须实现在新城看起来像瓦片群组的组件：

• 组的水平流动的宽度取决于组数的
• 每个组包含一个标题，它的宽度必须被扩展到该组内容
• 每个组包含由列排列瓷砖

我几乎达到目标的一个不确定的编码，但我不要理解flex容器为什么会自行扩展。有没有一种方法，以缩小其宽度以自己的内容宽度（去除青色瓦片右侧的蓝色空间）

DEMO：

http://jsfiddle.net/5ar0yyks/

CSS：

div.vertical { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
    align-content: flex-start; 
    align-self:flex-start; 
    align-items: flex-start;   
    background-color:blue; 
    max-height:100%; 
} 

HTML：

<div class="vertical"> 
    <div class = "vertical-tile"> 
     1      
    </div>  
    <div class = "vertical-tile"> 
     2      
    </div> 
    <div class = "vertical-tile"> 
     3       
    </div> 
</div> 

如果您认为这不是一种好方法，您有什么建议来解决此问题？

Answer 1

我终于通过自己得到的答案

实际上它似乎不能仅仅通过CSS由于关于Flexbox的实施

代码不同浏览器的行为提出：

$(document).ready(function() { 
$('.vertical').each(function(index) { 
    var lastChild = $(this).children().last(); 
    var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true); 
    $(this).width(newWidth); 
    }) 
}); 

演示：

http://jsfiddle.net/btuspmz6/2/