After spending hours trying to figure this out on my own, I finally caved and registered on StackOverflow. Despite Google providing plenty of related questions and examples, I still can't find a solution to my specific problem.
The issue at hand is creating a div that contains a centered column of paragraphs. These paragraphs need to scale with their font sizes, which they're not doing currently.
<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>
Here's a screenshot since I can't post images directly yet.
I've tried various methods, but the paragraphs are only adjusting their height based on the font size when using display:block
in the parent div and display:inline
for the paragraphs. Unfortunately, I want to use flexbox for centering, so that's not an option.
So my main questions are:
- Why aren't the paragraphs within the div adjusting their height to the text?
- How can I make them properly adjust vertically without text overlapping?