Make flex children inline-block [duplicate]

Answer 1

Add align-items: flex-start to the container:

.menu {
  display: flex;
  flex-flow: column;
  align-items: flex-start; /* NEW */
  list-style: none;
  padding: 0;
}
.menu > li {
  margin-bottom: 1rem;
  border-bottom: 3px solid black;
}

  
Tab 1
  
Tab 2
  
Tab 3

OR... switch from display: flex to display: inline-flex.

.menu {
  display: inline-flex;
  flex-flow: column;
  list-style: none;
  padding: 0;
}
.menu > li {
  margin-bottom: 1rem;
  border-bottom: 3px solid black;
}

  
Tab 1
  
Tab 2
  
Tab 3

More details here: Make flex items take content width, not width of parent container