将flexbox容器缩小到内容大小

Question

如果您使用Flexbox布局来连续布局某些项目,则Flexbox容器会占用其所在容器的整个宽度.如何将Flexbox容器设置为仅占用其子元素的宽度？

看一下下面的例子:

https://jsfiddle.net/5fr2ay9q/

在此示例中,flexbox容器的大小超出子元素的宽度.解决这类问题的典型方法display: inline显然是不起作用,因为它不再是一个flexbox容器.

是否有可能做到这一点？

.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

您可以使用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>