Reduce container size to flexbox

Question

If you use the Flexbox layout to place some elements in a row, the Flexbox container takes up the entire width of any container in which it is located. How do you set up a Flexbox container to accept only the width of its children?

Take a look at the following example:

https://jsfiddle.net/5fr2ay9q/

In this example, the size of the Flexbox container is larger than the width of the child. A typical way to fix something like this display: inline, but obviously this will not work, because then it is not a Flexbox container.

Can this be done?

.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>

Run codeHide result

Answer 1

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>

Hide result