フレックスを使用してコンテンツの長さに基づいて幅を設定する方法

Question

コンテンツに基づいて各アイテムの幅を作成しようとしていますが、これまでに使用可能なスペースまで幅を設定しています。 flex：0 0 autoはこのトリックをしていないようです。私は間違って何をしていますか？

目標のサイズはコンテンツのサイズに基づいています。

[Hello] 
[Hello world] 

現在

[Hello     ] 
[Hello world    ] 

https://jsfiddle.net/v6cgLjbd/8/

<span class='box'> 
    <span class='item'>Hello</span> 
    <span class='item'>Hello World</span> 
    <span class='item'>Hello lOOOOONG text</span> 
</span> 

.box { 
    height: 200px; 
    width: auto; 
    border: 1px solid red; 
    display: flex; 
    flex-direction: column; 
} 

.item { 
    background-color: gray; 
    flex: 0 0 auto; 
    width: auto; 
} 

Answer 1

あなたはフレックスコンテナにalign-items: flex-startを追加する必要があります。親要素にflex-direction: columnを使用すると、子要素にflexプロパティがあり、高さを制御しません。

.box { 
 
    height: 200px; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 

 
.item { 
 
    background-color: gray; 
 
}

<span class='box'> 
 
    <span class='item'>Hello</span> 
 
    <span class='item'>Hello World</span> 
 
    <span class='item'>Hello lOOOOONG text</span> 
 
</span>