如何让flexbox父项具有子项的宽度？

Question

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

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

目前,.parent是100%宽.我希望它只是两个孩子的宽度.

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

如何使父级成为其内容的宽度,而不是更宽？

请参阅codepen以获取实时演示.

Answer 1

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

codepen演示