Overflow not being applied - html

Question

I am working on a portfolio website with ReactJS + TailwindCSS.
Part of it is a section called 'About Me' where I have longer text. This longer text fits nicely as long as the text is not 'too long', then it reaches out of its parent div.
You can see similar effect on my Article Cards. I want them to stay the same size, nevertheless the amount of text in the footer.
This is my React Component where I render the the Article Cards:
function MainComponent() {
return (
<div className="container my-12 mx-auto px-4 md:px-12">
<div className="flex flex-wrap -mx-1 lg:-mx-4">
<ProjectComponent
projectName="Lorem Ipsum 1"
projectDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et nisl nulla. Sed tincidunt diam sit amet dictum posuere. Ut diam velit, rhoncus nec ligula vel, hendrerit hendrerit dui. Nunc eget augue faucibus, interdum diam condimentum, ullamcorper ex. Aenean ultricies urna at posuere pharetra. Nunc facilisis velit vitae ornare pretium. Suspendisse egestas sem eu facilisis tempor. Nullam ac malesuada libero. Mauris vulputate viverra mi, ac rutrum ante suscipit in. Donec vitae aliquet dolor. Aenean malesuada nec enim in tempus."
projectImage={TEST_IMAGE_URL}
projectUrl="someurl"
/>
<ProjectComponent
projectName="Lorem Ipsum 2"
projectDescription={TEST_ABOUT_ME}
projectImage={TEST_IMAGE_URL}
projectUrl="someurl"
/>
</div>
</div>
)
}
This is my Header Component (the About Me part that you can see overflow)
function HeaderComponent() {
return (
<div className="max-w-full h-1/5 rounded-sm shadow-lg flex flex-row">
<img src={profile} alt="Profile" className="flex-none w-64 p-2" />
<div className="flex-grow min-h-full">
<h1 className="text-lg text-white mt-10 font-sans">My Name</h1>
<p className="text-sm text-white mt-5 font-sans">{TEST_ABOUT_ME}</p>
</div>
<div className="flex-none w-64"></div>
</div>
)
}
Project Component that displays the Article Cards is wrapped in following DIV:
<div
className={`my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3 transform transition-all duration-1000 ease-out scale-${scale}`}
></div>
I am pretty sure that it is something with my Flexbox, I am still quite new with this, but I couldn't figure out how to make my texts not to overflow in Y axis.

Answer 1

You can use h-# + max-h-# + overflow-auto for this. Checkout a working example.
<div class="flex gap-x-8">
<div class="flex flex-1 flex-col">
<div class="h-48 bg-gray-100"></div>
<div class="h-48 max-h-48 overflow-x-hidden overflow-y-auto bg-blue-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde officiis qui rerum possimus fugit enim quos illo nostrum. Maxime soluta nostrum voluptas iusto autem, odit tenetur facere reprehenderit molestiae facilis?
</div>
</div>
<div class="flex flex-1 flex-col">
<div class="h-48 bg-gray-100"></div>
<div class="h-48 max-h-48 overflow-x-hidden overflow-y-auto bg-blue-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente error, vel expedita odio, nobis magni tempore optio voluptas deleniti eum nemo corrupti animi provident ipsa deserunt voluptatem sint? Est, quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quidem recusandae officiis quaerat adipisci corrupti ab, dolorem, ipsum repudiandae quam asperiores esse iusto veniam cupiditate magnam! Aspernatur velit quae vero!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam hic magnam perspiciatis eligendi perferendis temporibus, provident nihil iste libero aliquam natus mollitia maiores. Consequuntur voluptatum repudiandae similique quo nulla accusantium!
</div>
</div>
</div>