如何使一个div不填充其父项的高度？

Question

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

我都默认这种行为，希望有相反：让孩子做不填补其母公司（十字轴）的高度：

#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>

我应该怎么做（对父母？对孩子？），以便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>

以外的值