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

Question

I have a parent element with two elements inside:

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

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

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

How to make a parent be the width of its contents and not wider?

See the code for a live demo.

Answer 1

Change the parent screen from flex to inline-flex .

codepen demo