css - 我怎样才能使 flexbox 父级拥有其子级的宽度？

Question

我有一个父元素，里面有两个元素:

<div class="parent">
  <div class="child">
     one
  </div>
  <div class="child">
    two
  </div>
</div>

目前，.parent 是 100% 宽的。我希望它只是两个 child 的宽度。

.parent {
  display: flex;
  background-color: aliceblue;
}

如何让父级与其内容宽度相同，而不是更宽？

See codepen for a live demo.

Answer 1

将父级的显示从 flex 更改为 inline-flex。

codepen demo