Text grows div in width to accomodate itself

this is what happens when i put paragraph text in it. I just want it to respect it’s div’s borders and go on new line once it reaches the border (within certain margin)

What is “it” in your question?

this is what happens when i put paragraph text In div.
ctrl+f “three-reasons” in codepen to access these divs.
The second time, by “it to respect it’s borders” i mean text to respect div’s borders. What a terrible description :slight_smile:

Are you asking how to prevent the three divs nested inside the div with class=“three-reason” from overlapping each other?

no, i’m sorry for being unclear.
there are three divs around these pictures and one-word titles. They look nice and proportional, i’ve placed them in rows using flexbox. my problem is that when i enter a full sentence, text disregards the child div’s borders and makes it grow to cover all of the area between the other two. I want div’s borders to not change and stay the same and for text to start on new line once it reaches those borders.

Replace overflow: hidden; with flex: 0; in your .three-reasons div selector. This will force it not to allow the inner divs to grow and all three inner divs will be the same height based on the largest inner divs content.

1 Like

Thanks so much, that worked. Can you tell me what keywords to Google/Search Youtube to better understand why it worked?

There is a great page regarding Flexbox below, which I use often to understand understand the various properties available for flexbox.

1 Like

million-times thank you :slight_smile: