Flexbox不包装

Question

I've made this in flexbox:

But the text is not wrapping?

My code:

<template>
    <div>
        <bar :title="title"></bar>
        <div class="Row Center">
            <div class="Profile" v-if="!loading">
                <div class="Profile__body">
                    <div class="Profile__body__title">
                        <h1>{{ user.name }}  {{ user.last_name }}</h1>
                    </div>

                    <div class="Profile__body__content">
                        <p>Mobiel: {{ user.mobile }}</p>
                    </div>

                    <div class="Profile__body__content">
                        <p>Email: {{ user.email }}</p>
                    </div>

                    <div class="Profile__body__content">
                        <p>Functie: {{ user.function }}</p>
                    </div>

                    <div class="Profile__body__content" v-if="user.about">
                        <p>Over Mij: {{ user.about }}</p>
                    </div>

                    <div class="Profile__body__content">
                        <p>Corporatie: {{ user.corporation.name }}</p>
                    </div>
                </div>
            </div>

            <div class="Loader" v-if="loading">
                <grid-loader :loading="loading" :color="color" :size="size"></grid-loader>
            </div>
        </div>
    </div>
</template>

Stylus:

.Profile
  panel(100%, 40%)

.Profile__body
  panel-body(100%, 100%)

.Profile__body__title
  space-between()
  align-items center
  border-bottom 1px solid $main-border-color
  & > h1
    margin-left 10px

.Profile__body__content
  margin 10px
  flex-wrap wrap


.Row
    display flex
    max-width 1000px
    margin auto 

.Center
   display flex
   align-items center
   justify-content center

panel(height = 375, width = 100%, padding = 0px)
    margin-top 50px
    margin-bottom 10px
    padding padding
    background: $main-text-color
    height height
    width width
    border 1px solid $main-border-color

panel-body(min-width = 300px, height = 375px, width = 35%)
    flex-column()
    min-width min-width
    height height
    width width 

Any ideas?

Answer 1

That is not problem with flexbox, you need to use word-break: break-all

 .el { display: flex; } p { width: 50px; border: 1px solid black; word-break: break-all; } 

 <div class="el"> <p>looooooooooooooooooooooooooooorem</p> </div> 

Answer 2

.Grid {
  display: flex;
  flex-flow: row; 
  flex-wrap: wrap;
}