How to make a parent div grow with its children?

Answer 1

Adding display:flex to the parent div may work.

For example, I wanted an unknown number of circles in a row, centered within an absolutely positioned div that expands as more are added in.

#grandparent{

  width:300px;
  height:20px;
  position:absolute;
  right:30;
  bottom:30;

}

#parent{

  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  display: flex;

}


.children{

   background-color: white;
   border-radius: 50%;
   width: 16px;
   height: 16px;
   margin-left: 3px;
   margin-right: 3px;

}

See https://codepen.io/anon/pen/zXwRza