Jamie Jamie - 10 months ago 69
CSS Question

Flexbox not wrapping

I've made this in flexbox:

enter image description here

But the text is not wrapping?

My code:

<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 class="Profile__body__content">
<p>Mobiel: {{ user.mobile }}</p>

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

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

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

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

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


panel(100%, 40%)

panel-body(100%, 100%)

align-items center
border-bottom 1px solid $main-border-color
& > h1
margin-left 10px

margin 10px
flex-wrap wrap

display flex
max-width 1000px
margin auto

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%)
min-width min-width
height height
width width

Any ideas?

Answer Source

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">