How to make children their height wrap within a flexbox parent

Question

I've been trying to find the correct answer for a while but didn't really know the right words to look for.

Example

Expected Example

I'm currently having trouble where the children containers are being set to the height of the parent (which is currently defined by a child).

Code

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

.wrapper {
  display: flex;
}

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

JSFiddle

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>

From CSS tricks, align-items:
The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis).

Also from CSS tricks, align-self:
align-self will affect the specific child of a flex element

Answer 2

use height:max-content; so u can achieve your aim, try snippet

.wrapper {
  display: flex;
}

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

}

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