html - How to make children their height wrap within a flexbox parent

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65894739/how-to-make-children-their-height-wrap-within-a-flexbox-parent

Answer 1

You could do either:

• Add align-items: flex-start to the parent .wrapper definition
• Add align-self: flex-start to the child .container definition

.wrapper {
  display: flex;
  align-items: flex-start;
}

.container {
  color: white;
  padding: 8px;
  background: black;
  border: 1px solid red;
  display: inline-flex;
  border-radius: 12px;
  width: 100%;
}

<div class='wrapper'>
  <div class='container'>
    Line 1<br>Line 2
  </div>
  
  <div class='container'>
    Line 1
  </div>
</div>