フレックスボックスコンテナをコンテンツサイズに縮小

Question

Flexboxレイアウトを使用して行内のいくつかのアイテムをレイアウトする場合、Flexboxコンテナはそのコンテナの全幅を占有します。Flexboxコンテナは、それの子要素の幅ですか？フレックスボックスコンテナのサイズは、子要素の幅を超えて拡張するこの例では

https://jsfiddle.net/5fr2ay9q/

：

は、次の例を見てみましょう。このようなものを修正する典型的な方法はdisplay: inlineですが、これはフレックスボックスコンテナではないため、動作しないことは明らかです。

これは可能ですか？

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    outline: 1px solid red; 
 
} 
 

 
p { 
 
    outline: 1px solid blue; 
 
}

Can you make the flex container not 100% width but rather the width of the content itself? 
 

 
<div class='container'> 
 
    <img src='https://placehold.it/300x300'/> 
 
    <p> 
 
    This is some content hello world testing 123. 
 
    </p> 
 
</div>

Answer 1

あなたは（Designating a Flexible Boxを参照）display: inline-flex;を使用することができます。

.container { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    outline: 1px solid red; 
 
} 
 

 
p { 
 
    outline: 1px solid blue; 
 
}

Can you make the flex container not 100% width but rather the width of the content itself? 
 

 
<div class='container'> 
 
    <img src='https://placehold.it/300x300'/> 
 
    <p> 
 
    This is some content hello world testing 123. 
 
    </p> 
 
</div>