How to adopt a flex div's width to content in HTML?

Use display: inline-flex to adopt a flex div’s width to content:

#box {
   display: inline-flex;
   flex-direction: row;
   flex-wrap: wrap;
   max-width: 200px;
   padding: 10px;
   margin: 20px;
   background-color: blue;
}