Preventing flexbox items stretching according to paragraphs

Question

Hello I am vey new to HTML and CSS and I am trying to do a website for just learning it quickly. I am using flexbox and I have got a problem.

At first my flexbox items weren't at the same size (example: Image) but then I fixed it with using flex: 1; and it looked like this. They were all same size but they are all taking the longest size of each other and still when I do long paragraphs it's not working (example: Image). I want to do all my items at the same size independent from paragraphs and when I do long paragraphs I want them to go bottom row (example: Thats what I'm wanting). How can I do that?

Sorry for my bad English my English is not so good.

*{
    margin: 0px;
    padding: 0px;
}
.container-1 div{
    border: 3px black solid;
    padding: 120px;
    margin-top: 50px;
}
.container-1{
    display: flex;
    justify-content: space-between;
}
.box-1{
    margin-left: 1em;
    flex: 1;
}
.box-2{
    flex: 1;
}
.box-3{
    flex: 1;
    margin-right: 1em; 
}

<div class="container-1">
    <div class="box-1">
        <h3>AAAAA</h3>
        <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
    </div>
    <div class="box-2">
        <h3>AA</h3>
        <p>a</p>
    </div>
    <div class="box-3">
        <h3>AAAAAAAAAAA</h3>
        <p>a</p>
    </div>
</div>

I don't really think you will have such content `AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA` --> use a real content and you obtain what you want with your actual code — Temani Afif, Nov 21 '19 at 13:42

score 0 · Answer 1 · answered Nov 21 '19 at 13:35

0

You can add

p{ word-break: break-all }

to your CSS.

answered Nov 21 '19 at 13:35

Maldek

26
5

score 0 · Answer 2 · answered Nov 21 '19 at 13:39

You can do like this
    .container-1 {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .container-1 div {
        border: 3px black solid;
        padding: 16px;
        margin-top: 50px;
        word-break: break-word;
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

Preventing flexbox items stretching according to paragraphs

2 Answers2