How to make a div not fill the height of its parent?

Question

There are several questions about how to make a child div the height of its parent.

I have this behaviour by default and would like to have the inverse: so that the child does not fill the height of its parent (cross-axis):

#root {
  display: flex;
  flex-direction: row;
  height: 50px;
  width: 200px;
  background: blue;
}

.el {
  background: red;
}

<div id="root">
  <div class="el">hello</div>
  <div class="el">world</div>
</div>

What should I do (to the parent? to the child?) so that the height of hello and world is tight with the text?

Answer 1

Use align-items with a value other than stretch

#root {
  display: flex;
  flex-direction: row;
  height: 50px;
  width: 200px;
  background: blue;
  align-items: flex-start;
}

.el {
  background: red;
}

<div id="root">
  <div class="el">hello</div>
  <div class="el">world</div>
</div>