How can I get paragraphs to scale with font size within CSS flexbox?-CodePudding

This should most probably be an easy thing to do, I've been trying for hours now however which got my level of frustration high enough to finally register on StackOverflow. Google offers plenty of related questions and examples, but I've been unable to find anything regarding my specific problem.

I'm trying to create a div that will contain a (horizontally and vertically centered) column of paragraphs. These paragraphs should scale with their respective font sizes, which they don't.

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

Screenshot (I don't have the permissions to directly post images yet)

I have tried multiple things, but the paragraphs are only adjusting their height according to the font size when using display:block in the parent div and display:inline for the paragraphs. Since I want to use flexbox for centering this is not an option however.

So my questions are:

Why are the paragraphs within the div not adjusting their height to the text?
How do I get them to properly (vertically) adjust and avoid overlapping of text?

CodePudding user response：

I am not 100% clear what end result you want but it seems your code is fine but you hadn't removed the default margin applied by browsers to p tags.

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