如何使div不填充其父级的高度？

Question

关于how to make a child div the height of its parent，有几个问题。

默认情况下我有这种行为，并希望有反向：这样孩子不填充其父级（横轴）的高度：

＆＃13;

＆＃13;

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

.el {
  background: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我应该怎么做（对于孩子的父母？），以便hello和world的高度紧跟文字？

Answer 1

使用align-items

以外的值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>