如何在CSS flexbox中使段落按字体大小缩放

Question

这可能是一件很容易的事情，但我已经尝试了几个小时，这让我的沮丧程度达到了最终在StackOverflow上注册的程度。谷歌提供了很多相关的问题和例子，但我一直找不到任何关于我的具体问题的信息。

我正在尝试创建一个div，它将包含一列(水平和垂直居中(段落。这些段落应该根据它们各自的字体大小进行缩放，但它们没有。

<div style="border: 1px solid red; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 500px; height: 250px;">
<p style="border: 1px solid blue; font-size: 6rem;">The Header</p>
<p style="border: 1px solid blue; font-size: 1rem;">Some Text</p>
</div>

屏幕截图(我还没有直接发布图片的权限(

我尝试了很多方法，但当在父div中使用display:block，在段落中使用display:inline时，段落只是根据字体大小调整高度。由于我想使用flexbox来居中，所以这不是一个选项。

所以我的问题是：

• 为什么div中的段落没有根据文本调整高度
• 如何使它们正确(垂直(调整并避免文本重叠

Answer 1

我不100%清楚你想要什么最终结果，但你的代码似乎很好，但你没有删除浏览器应用于p标签的默认边距。

.wrap {
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 500px;
height: 250px;
}
.wrap p {
border: 1px solid blue;
font-size: 1rem;
margin: 0;
}
.wrap .p1 {
font-size: 6rem;
}

<div class="wrap">
<p class="p1">The Header</p>
<p>Some Text</p>
</div>