如何使柔性柱容器收縮到其內容

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/