How can I make a flexbox parent have the width of its children?

问题

I have a parent element, with two elements inside:

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

Currently, the .parent is 100% wide. I would like it only to be the width of the two children.

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

How can I make the parent to be the width of it's contents, and not wider?

See codepen for a live demo.

回答1:

Change the parent's display from flex to inline-flex.

codepen demo

来源：https://stackoverflow.com/questions/33722001/how-can-i-make-a-flexbox-parent-have-the-width-of-its-children