Flexbox не оборачивать

Question

Я сделал это в Flexbox:

Но текст не оборачивать?

Мой код:

<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 

Любые идеи?

Answer 1

Это не проблема с Flexbox, вам нужно использовать 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; 
}