html - flex-container に必要な幅のみを使用させる

Question

のように定義された flex-container

display: flex; 
flex-flow: column wrap;
height: 4em;

このフィドルに見られるように、利用可能なすべての幅を消費します。テーブルのように動作させ、必要なスペースだけを消費させるにはどうすればよいですか?

注: 希望の幅が事前にわからず、残りのスペースに他のコンテンツを配置したいので、特定の幅を割り当てたくありません。

Answer 1

残念ながら、テーブルの動作を取得することはできません。インライン ブロックの動作を取得できます。

.foo {
    display: inline-flex;
}

ここでの違いは、tableが後続のコンテンツを同じ行ではなく後で強制的に表示することです。