Jamie Jamie - 1 month ago 8
CSS Question

Flexbox not wrapping

I've made this in flexbox:

enter image description here

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

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>

Comments