How do I set a flex-container to be the width of its flex-items?

Question

I have a flex container with justify-content: flex-start. There ends up being overflow on the right side due to the flex items taking less space than the size o

Answer 1

1. width: min-content (CSS3 "intrinsic" as opposed to "extrinsic")

2. display: inline-flex if you don't care whether it's inline

If you use width: min-content on a paragraph, the longest word determines the width.

.flex-container {
  display: flex;
}

.flex-inline-container {
  display: inline-flex;
}

.width-min-content {
  width: min-content;
}

.row-direction {
  flex-direction: row;
  border: 0.0625rem solid #3cf;
 }
.col-direction {
  flex-direction: column;
  border: 0.0625rem solid magenta;
}

flex

  
  


  
  



flex width: min-content

  
  


  
  



inline-flex